今天一位老哥问我一个问题:他在调试element-ui样式的时候，在控制台可以调样式，但是写进css就不行，样式就不起作用了。
image.png
image.png
然后我大概的看了一下他的模板结构，发现他这个是由于一个深度作用选择器导致样式无法修改。
vue项目中，当<style>标签有scoped属性时，它的 CSS 样式只作用于当前组件中的元素，父组件的样式将不会渗透到子组件中。也就是说，他能修改的样式不够深。
一般有两种解决方法
- 使用
>>>操作符
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码将会编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }
- 对于scss这类的预处理器
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。
.a{
/deep/ .b{
/* ... */
}
}
更多文章访问个人博客：http://www.lfanliu.top
网友评论