为了保证每个组件的css唯一性,避免污染全局或者被全局污染,vue提供了scoped作用域。当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,可以用深度作用选择器(样式穿透)来实现。
深度作用选择器有多种写法:
操作符>>>
.table >>> th{
text-align: center;
padding: 4px;
}
有些像 Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
或 ::v-deep
操作符取而代之——两者都是 >>>
的别名,同样可以正常工作。
/deep/
.table /deep/ th{
text-align: center;
padding: 4px;
}
::v-deep
.table ::v-deep th{
text-align: center;
padding: 4px;
}
:deep()
.table :deep(th){
text-align: center;
padding: 4px;
}
- 操作符 >>> 可能会因为无法编译而报错,可以使用 /deep/
- 对于使用了 css 预处理器(scss 、sass、 less)时,深度选择器 ::v-deep 比较通用
- vue3废弃 >>>、::v-deep、/deep/,采用:deep()