参考文献
深度选择器
深度选择器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
样式隔离,允许组件内的样式影响到组件外部的元素。它们实际上是同一种概念的不同表示形式。以下是它们的区别和历史背景:
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){}
版权归原作者 梦醒贰零壹柒 所有, 如有侵权,请联系我们删除。