Vue开发中 /deep/ ::v-deep >>> :deep() 四者使用说明

在vue中，我们为了避免父组件的样式影响到子组件的样式，会在 标签上设置scoped属性，这样它的 CSS 只会应用到当前组件的元素上，即使父组件中有跟子组件相同的class名称或者选择器的时候，也不会影响到子组件的样式。但是有的时候我们需要在一个组件中改变被引入组件的样式（即父组件改变子组件的样式），由于scoped属性的防渗透作用，直接使用class命名改变样式没有任何反应. 通常，会有两种处理方法：

• 将scoped属性去掉。样式生效了，但是这种写法是作用到全局的，如果不严格规范class的命名，非常容易污染全局样式。这种写法，其实等同于写在全局样式文件 [反对使用]

• 保留scoped属性，使用深度选, 必须使用这种方式, 避免全局污染

Vue2:

>>> 只作用于css的深度选择器，对于less和scss不起用，

在less中使用 /deep/ 或 ::v-deep

在scss中使用/deep/会报loader错误,这时可以使用 ::v-deep 或  :deep来代替

//单选框修改选中时的背景颜色
::v-deep .uni-radio-input-checked {
	background: $uni-color-primary  !importan
}

:deep(.ant-card-head-title){
    background: yellowgreen;
}

Vue3

使用 :deep

//单选框修改选中时的背景颜色
:deep(.uni-radio-input-checked)  {
	background: $uni-color-primary  !important;
}

>>> 和 /deep/ ::v-deep 都不推荐了

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.