vue中的css深度选择器

在Vue.js项目中，尤其是在使用组件化开发时，我们时常需要修改组件内部的样式，但Vue的样式封装特性（如<style scoped>）会阻止外部样式直接作用于组件内部。为了应解决这个问题，Vue社区引入了深度选择器（也称为穿透选择器或阴影穿透选择器），让我们能够跨越组件的封装边界，对内部元素进行样式定制。

解决办法一:

由于scoped属性的防渗透作用，添加的样式不会生效,将scoped属性去掉,样式生效了.这种写法是作用到全局的，如果不严格规范class的命名，非常容易污染全局样式。这种写法，等同于写在全局样式文件中。

解决方法二:

保留scoped属性，使用深度选择器

1. /deep/

/deep/是Vue 2.x中用于穿透组件样式封装的一种方式,兼容性:支持CSS预处理器（如Sass、Less）和CSS原生样式。注意：在Vue 3.x中，/deep/不再被官方直接支持

2. >>>

CSS原生语法:>>>是CSS原生中的深度选择器语法，用于穿透样式封装。但在Vue单文件组件（.vue）中，它并不总是被直接支持，因为Vue会将其视为普通CSS选择器的一部分。兼容性：仅在某些特定环境（如Webpack的css-loader配置中）和原生CSS中有效，Vue单文件组件中通常需要特定配置才能使用。注意：在Vue 3.x中，>>>同样不再被推荐使用

3. ::v-deep

Vue 3.x中的推荐用法：::v-deep是Vue 3.x中引入的官方深度选择器，用于替代Vue 2.x中的/deep/和原生CSS中的>>>。兼容性：支持CSS预处理器和CSS原生样式，是Vue 3.x中推荐使用的深度选择器。

4. :deep

特殊用法：在Vue 3的Composition API中，可以通过v-deep()函数在<style>标签中动态应用深度选择器。这不是CSS语法的一部分，而是Vue 3特有的模板编译特性。用法：通常在<style>标签的scoped属性下，结合v-bind:class或v-bind:style在模板中动态绑定样式时使用。

总结

Vue 2.X

<style scoped>
.parent /deep/ .child {
  /* 样式规则 */
}
</style>

或者使用>>>（需要配置支持）：

<style scoped>
.parent >>> .child {
  /* 样式规则 */
}
</style>

Vue 3.x

<style scoped>
:deep(.van-card__thumb) {
  width: 120px;
  display: flex;
  justify-content: space-around;
}
</style>

新的vue3.0 单文件规范中，如果你还是使用写法3，会碰到如下警告:

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

写法3在vue3.0中已经被不推荐使用，在开发vue3.0项目的时候，使用写法4