极客观点
项目管理
HarmonyOS
如题
好像并不是权重的问题，因为浏览器的控制台已经叉掉之前的样式
如上图，如果我把下面俩个被浏览器划掉的勾号给去掉，上面的样式才能生效
加!important也没用的，就是下面两个被浏览器划掉的起的作用，只要把下面那俩样式前面的勾号去掉，最上面的样式就生效了
但是如果我这么写的话，就可以把下面的覆盖掉，就是可以生效的，有大神解释下么
求大神解答
我把整个代码贴出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="./test.less">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.0.8/lib/index.js"></script></head>
<body>
<div id="app">
<template>
<el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName" :header-row-class-name="demo" border :header-row-class-name="demo">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
</div>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.el-table th, .el-table tr.demo {
background-color: #0f0!important;
}
/* .el-table th, .el-table tr.demo{
background: red;
} */
</style>
<script>
var Main = {
methods: {
tableRowClassName({
row,
rowIndex
}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
demo({row, rowIndex}){
return 'demo';
}
},
data() {
return {
tableData2: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script></body>
</html>
!important