[前端] 深度选择器deep使用介绍（笔记）
梦醒贰零壹柒 2024-08-15 17:33:01 阅读 75
参考文献
深度选择器
深度选择器deep使用说明
在 Vue 中，为了实现组件内部样式对组件外部元素的穿透覆盖，可以使用 CSS 的 deep 选择器（也称为 >>> 或 /deep/）或 v-deep 指令。然而，这两个方法在 Vue 3 中已经被废弃，推荐使用 ::v-deep 伪类选择器。
示例
<code><template>
<div class="my-component">code>
<!-- ... -->
</div>
</template>
<style scoped lang="less">code>
.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 样式隔离，允许组件内的样式影响到组件外部的元素。它们实际上是同一种概念的不同表示形式。以下是它们的区别和历史背景：
Vue 2.x:
在 Vue 2.x 中，Vue 提供了两种语法来穿透 scoped 样式：
/deep/: 这是一个 CSS 伪类选择器，用于 Vue 2.x 中的单文件组件 (SFC) 中，它允许组件内部的样式穿透到外部元素。
>>>: 这是另一种写法，功能与 /deep/ 相同，它也是 Vue 2.x 中的一个语法糖，用于 CSS 预处理器中，比如 Sass 或者 Less。
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) {
}
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。