[前端] 深度选择器deep使用介绍（笔记）

参考文献

深度选择器

深度选择器deep使用说明

在 Vue 中，为了实现组件内部样式对组件外部元素的穿透覆盖，可以使用 CSS 的 deep 选择器（也称为 >>> 或 /deep/）或 v-deep 指令。然而，这两个方法在 Vue 3 中已经被废弃，推荐使用 ::v-deep 伪类选择器。

示例

<template><div class="my-component"><!-- ... --></div>
</template><style scoped lang="less">
.my-component {/deep/ .target-class { // 或者使用 &:deep(.target-class)color: red;}
}
</style>

/deep/ 或 &:deep() 选择器可以穿透组件的 scoped 属性，使得内部样式可以作用于组件外部的 .target-class 元素。这里的 & 符号代表当前的选择器，&:deep() 将 & 与 .target-class 结合，创建了一个穿透性的嵌套选择器。

::v-deep 与/deep/ 的区别

::v-deep 和 :deep() 在 Vue 2.x 和 Vue 3.x 中都是用来穿透组件的 scoped 样式隔离，允许组件内的样式影响到组件外部的元素。它们实际上是同一种概念的不同表示形式。以下是它们的区别和历史背景：

1. Vue 2.x:
   在 Vue 2.x 中，Vue 提供了两种语法来穿透 scoped 样式：
   /deep/: 这是一个 CSS 伪类选择器，用于 Vue 2.x 中的单文件组件 (SFC) 中，它允许组件内部的样式穿透到外部元素。
   >>>: 这是另一种写法，功能与 /deep/ 相同，它也是 Vue 2.x 中的一个语法糖，用于 CSS 预处理器中，比如 Sass 或者 Less。

2. Vue 3.x:
   Vue 3.x 移除了 /deep/ 和 >>> 选择器，因为它们在某些 CSS 预处理器中存在解析问题，并且不是标准的 CSS 语法。
   ::v-deep 被引入作为 Vue 3.x 的替代方案，这是一个伪元素选择器，它解决了预处理器中的解析问题，并且更加符合 CSS 标准。
   在 Vue 3.x 中，::v-deep 仅限于在 SFC 的 <style> 标签内使用，它与 Vue 2.x 中的 /deep/ 和 >>> 表达相同的功能。

多级深度使用示例

.parent :deep(.child-class) {}