深度选择器（样式穿透）

在 vue 项目的开发过程，会遇到在父组件中想要修改子组件的样式，如：
官网地址：Scoped CSS | Vue Loader (vuejs.org)

父组件：father.vue

<script>
    import child from "./child.vue"
</script>
<template>
    <child class="child" />
</template>

子组件：child.vue

<template>
  <div class="w-full h-full flex flex-col items-center flex-auto justify-center align-center">
    <div>
      前端真好玩
    </div>
    <p>
      子木学前端
    </p>
  </div>
</template>

当我们想要去修改子组件中的p标签的时候，直接去父组件的 style标签中使用 .child > p是作用不到子组件的 p标签上的这个时候我们就需要用到样式穿透了

1.>>>

如父组件：father.vue

<script>
    import child from "./child.vue"
</script>
<template>
    <child class="child" />
</template>
<style lang="css" scoped>
    .child >>> p{
        color: pink;
    }
</style>

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

2./deep/

父组件：father.vue 但是有些开发者反应，在 vue-cli3 编译时，deep 的方式会报错或者警告

<script>
    import child from "./child.vue"
</script>
<template>
    <child class="child" />
</template>
<style scoped lang="scss">
.overTime {
  /deep/ p {
    color: pink;
  }
}
</style>

但是有些开发者反应，在 vue-cli3 编译时，deep 的方式会报错或者警告。

3. ::v-deep(推荐使用)

<script>
    import child from "./child.vue"
</script>
<template>
    <child class="child" />
</template>
<style scoped lang="scss">
.overTime {
  //切记必须是双冒号
  ::v-deep p {
    color: pink;
  }
}
</style>

总结：::v-deep 更保险并且编译速度更快