關於element的scoped屬性導致css失效

假設你的 content.vue 引用了組件 el-input

普通用法：

<el-input class="test-input" placeholder="請輸入手機號碼"></el-input>


<style lang="css" scoped>
    .test-input{
        border:1px solid red;
    }
</style>

渲染出來以后的是

<div data-v-97e679dc="" class="test-input el-input el-input--small">
    <input type="text" autocomplete="off" placeholder="請輸入手機號碼" class="el-input__inner">
</div>



.test-input[data-v-97e679dc] {
    border: 1px solid red;
}

此時是正常的，能用應用到css樣式

但是如果寫法是：

<style lang="css" scoped>
    .test-input .el-input__inner{
        border:1px solid red;
    }
</style>

渲染出來的結果就是：

<div data-v-97e679dc="" class="test-input el-input el-input--small">
    <input type="text" autocomplete="off" placeholder="請輸入手機號碼" class="el-input__inner">
</div>

.test-input .el-input__inner[data-v-97e679dc]{
    border:1px solid red;
}

 明顯

對於CSS --- scoped 僅僅會給最后一個類選擇ID增加屬性選擇器  className[attr]

對於DOM --- scoped 僅僅會對當前組件引用的組件的最外層 div 增加 屬性 attr,導致無法引用

如果想在本組件更改子組件的屬性，必須      1  去除scoped屬性  2 加大權重 - 起碼能優先級高過子組件內部的 .el-input__inner 的優先級 - 最好采用ID防止污染其他組件的樣式（全局）

 

參考博客：

https://www.cnblogs.com/makai/p/11415156.html

https://www.jianshu.com/p/ebb6fe42c254