使用场景

有的时候我们需要在父组件中去修改第三方组件或者子组件的样式就会使用到deep深度选择器。比如：App组件中定义了.title的样式，也想让Test子组件中的.title也应用对应的样式

App.vue

<template>
  <div class="app">
    <h1>app组件</h1>
    <div class="title">这是app的标题</div>
    <test></test>
  </div>
</template>
<style scoped>
.title {
  color: #f00;
}
</style>

Test.vue

<template>
  <div class="test">
    <h1>Test组件</h1>
    <div class="title">这是test组件的标题</div>
  </div>
</template>

style标签为啥加"scoped"？是为防止在组件中定义的样式，影响到其他的组件。

deep深度选择器

vue-loader

为什么会牵扯到vue-loader？因为.vue文件的解析是由vue-loader去处理的，它有如下几个主要的功能：

• 对template中的资源路径（比如：img以及URL等等）进行转换
• 除了形成本地的样式之外，还可以对子组件进行传递（scope css）
  ...

相关链接：https://vue-loader.vuejs.org/

deep深度选择器的使用

/* 
  方式1：.a >>> .b { .... }
  缺点：像 Sass 之类的预处理器无法正确解析 >>>
*/
/* >>> .title {
  color: #f00;
} */

/* 方式2： /deep/ */
/* /deep/ .title {
  color: #f00;
} */

/* 方式3： ::v-deep(选择器) */
/* ::v-deep(.title) {
  color: #f00;
} */

/* 方式4： :deep(选择器) */
:deep(.title) {
  color: #f00;
}

官网并没有说明除了第一种以外其他方式的优缺点，所以得自己领会。

• 使用/deep/，编辑器会报红色警告，但是项目正常运行。
• 所以感觉第三和第四种会使用比较频繁点。

参考文章

穿透不生效问题排查 --- https://juejin.cn/post/7205208559264530488#comment