深度选择器探秘：/deep/、＞＞＞、::v-deep 与 v-deep() 的区别

最新推荐文章于 2025-10-22 17:49:36 发布

原创最新推荐文章于 2025-10-22 17:49:36 发布 · 1.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #vue #es6

一：意义. 从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用

二：区别

1：/deep/

1：Vue 2.x中的用法：/deep/是Vue 2.x中用于穿透组件样式封装的一种方式，类似于Sass的/deep/或/deep/的别名::v-deep（但Vue 2.x官方文档中并未直接提及::v-deep）
2：兼容性：支持CSS预处理器（如Sass、Less）和CSS原生样式。
3：注意：在Vue 3.x中，/deep/不再被官方直接支持，虽然一些构建工具或库可能仍然兼容，但推荐使用::v-deep

2：>>>

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

3：::v-deep

1：Vue 3.x中的推荐用法：::v-deep是Vue 3.x中引入的官方深度选择器，用于替代Vue 2.x中的/deep/和原生CSS中的 ‘>>>’。
2：兼容性：支持CSS预处理器和CSS原生样式，是Vue 3.x中推荐使用的深度选择器
3：优点：与Vue 3的其他新特性相兼容，提供了更好的开发体验

4：v-deep()（Vue 3 Composition API）

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

实例

<template>
  <div :class="{'custom-class': true}">
    <ChildComponent />
  </div>
</template>

<script setup>
// Composition API 逻辑
</script>

<style scoped>
.custom-class::v-deep(.child-class) {
  /* 样式规则 */
}
/* 或者使用v-deep()函数（虽然不直接在<style>中，但说明其概念） */
/* 注意：实际中v-deep()不直接用于<style>标签内，而是可能通过其他方式结合Composition API使用 */
/*
实际上在<style>标签内直接使用v-deep()函数是不支持的。
在Composition API中，v-deep()通常与动态样式绑定结合使用，但这更多是在JavaScript层面而非CSS层面
*/
</style>

三：使用方式

VUE 2.x

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

Vue 3.x

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<script setup>
// Composition API 逻辑
</script>

<style scoped>
.parent::v-deep .child-class {
  /* 样式规则，这些规则将穿透到ChildComponent内部，并应用于具有.child-class类的元素 */
  color: blue;
  font-weight: bold;
}
</style>

v-deep()并不是一个在 style 标签内直接使用的CSS选择器或函数。相反，它的概念更多地与Vue 3.x的Composition API和动态样式绑定相关。然而，Vue官方并没有直接提供一个名为v-deep()的函数用于在Composition API中处理样式穿透。在Composition API中处理样式穿透时，你通常会继续使用::v-deep选择器，但可能会通过JavaScript逻辑来动态绑定类名或样式，而不是直接使用一个名为v-deep()的函数。例如，你可以使用v-bind:class或v-bind:style来根据组件的状态动态地添加或移除样式类。