css覆蓋eleUI，瀏覽器上顯示已經生效，但是實際并沒有生效

如題

好像并不是權重的問題，因為瀏覽器的控制臺已經叉掉之前的樣式

如上圖，如果我把下面?zhèn)z個被瀏覽器劃掉的勾號給去掉，上面的樣式才能生效

加!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" >
<!-- 引入組件庫 -->
<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: '上海市普陀區(qū)金沙江路 1518 弄',
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄',
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                }]
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

</body>

</html>

回答

編輯回答