终于搞懂样式穿透

549 阅读1分钟

scoped 仅供当前组件使用的样式

加上之后会在本页面根div 最外层 加上一个class类名

这个类名 <<< .第三方之类 实际上是用了优先级的原理 覆盖了原有之类的样式

div 根元素类 .可以操作子组件(第三方的样式)根类

div 根元素类 .不可以操作子组件(第三方的样式)子类

ps: 注意,有些css预处理器,比如Sass, Less,可能无法正确解析>>>,这种情况下,可以使用/deep/或::v-deep代替~~~

关于兼容性问题,参考:github.com/vuejs/vue-l…

“这些深度选择器的写法最终都会被编译掉的,所以和浏览器兼容性无关。” 上面是尤大的原话,可以参考一下~