VUE深度作用选择器/deep/

为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域。当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以用深度作用选择器（样式穿透）来实现。

VUE官网

深度作用选择器有多种写法：

操作符>>>

.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()