一、样式 style: scoped
一个 .vue文件可以包含多个<style>标签。<style>标签可以有scoped 或者module属性。
scoped属性时，它的css只作用于当前组件中的元素。使用scoped后，父组件的样式将不会渗透到子组件中。
子组件的根元素
不过一个子组件的根节点会同时受其父组件的scoped CSS和子组件的scoped CSS的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
深度作用选择器: >>>
scoped样式中一个选择器影响子组件，可以使用>>>操作符
像Sass之类的预处理器无法正确解析 >>>. 可以使用 /deep/ 或::v-deep操作符取而代之----- 两者都是>>>的别名，同样可以正常工作。
<style scoped>
.a >>> .b { /*....*/ }
</style>
动态生成的内容
通过v-html创建的DOM内容不受scoped样式影响，但是仍然可以通过深度作用选择器来为他们设置样式。
注意点
-
Scoped样式不能替代class。 考虑到浏览器渲染各种CSS选择器的方式，当
p { color: red }是scoped时(即与特性选择器组合使用时)会慢很多倍。如果使用class或者id取而代之，比如.example { color: red },性能影响就会消除。 -
在递归组件中小心使用后代选择器！ 对选择器
.a .b中的CSS规则来说，如果匹配.a的元素包含一个递归子组件，则所有的子组件中的.b都将被这个规则匹配。
二、样式style：CSS Modules
待续
网友评论