scoped 样式中的 deep

参考资料

现在有以下两个组件, Home.vue 和 HelloWorld.vue

Home.vue

<template>
  <div class="home">
    <HelloWorld />
  </div>
</template>

<style scoped>
</style>

HelloWorld.vue

<template>
  <div class="hello">
    hello
    <div class="world">
      world
    </div>
  </div>
</template>

由于 Home 组件的样式是 scoped，所以以下代码是无效的：

Home.vue

<style scoped>
.home .world {
    color: red;  
}
</style>

以上代码并不能让 world 变为红色

但是，如果我们使用以下代码:

Home.vue

<style scoped>
.home .hello {
    color: red;  
}
</style>

那么 hello 和 world 都会变红色，hello 作为子组件的根元素，能够在父级的 scoped 中被访问到。参考

而 world 显示为红色，单纯是因为从 hello 中通过 css 继承而来。

为了实现在 scoped 的 Home 组件 中控制 .world 的样式，Vue 中引入了 深度作用选择器, 如下:

// 方式1，兼容 scss
<style scoped>
.home /deep/ .world {
  color: red;
}
</style>


// 方式二
<style scoped>
.home ::v-deep .world {
  color: red;
}
</style>

// 方式三  不能用于 scss 中
<style scoped>
.home >>> .world {
  color: red;
}
</style>