vue的css深度选择器 deep /deep/

作者：System 时间：2024年08月11日分类：所有,vue.js 字数：718

这篇文章距离上次修改已过271天，其中的内容可能已经有所变动。

在Vue中，如果你想要在组件内部应用深度作用域的CSS样式，可以使用>>>、/deep/或者::v-deep这些特殊的深度选择器。

>>> 是在Sass/SCSS中使用的，而 /deep/ 和 ::v-deep 是标准的或者说是推荐的方式，它们在所有CSS预处理器中都可以使用。

以下是一个简单的例子：

<style scoped>
.parent >>> .child {
  /* 这会应用于.child类，无论它在组件的DOM中的深度如何 */
  color: red;
}

/* 或者使用/deep/方式 */

.parent /deep/ .child {
  /* 这同样会应用于.child类，无论它在组件的DOM中的深度如何 */
  color: red;
}

/* 在新版本的Vue中，建议使用::v-deep方式 */

.parent::v-deep .child {
  /* 这同样会应用于.child类，无论它在组件的DOM中的深度如何 */
  color: red;
}
</style>

<template>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</template>

在上面的例子中，无论.child类所在的DOM层级有多深，上述CSS规则都会应用样式。

注意：在Vue 1.x中，使用了>>>和/deep/，而在Vue 2.x及以上版本中，推荐使用::v-deep。

vue的css深度选择器 deep /deep/

评论已关闭

推荐阅读