scoped
当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。
使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。
代码如下:
1 |
|
如果需要覆盖全局样式或者影响子组件,可以使用 >>> 操作符
代码如下:
1 |
|
有些像 Less、Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。