关于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