关于Vue—父组件重写子组件样式

一、参考文档

https://vue-loader.vuejs.org/guide/scoped-css.html

二、方法

普通写法
.a >>> .b { /* … */ }

// 使用预编译器写法
.a {
/deep/ .b{ /* … / }
}
上面将被编译成：
.a[data-v-f3f3eg9] .b { / … */ }

三、动态生成的内容

使用创建的DOM内容v-html不受范围样式的影响，但是您仍然可以使用深度选择器设置样式。

四、注意

vue-loader从2.2.0开始支持 /deep/

范围样式不能消除对类的需要。由于浏览器呈现各种CSS选择器的方式，p { color: red }确定范围（即与属性选择器结合使用）时，速度会慢很多倍。如果改用类或id，例如in .example { color: red }，则实际上消除了性能下降。这是一个游乐场，您可以在其中测试差异。

小心递归组件中的后代选择器！对于具有选择器的CSS规则.a .b，如果匹配的元素.a包含递归子组件，则.b该规则将匹配该子组件中的所有子组件。