360网站做二维码,中山网站设计收费标准,韩城市网站建设,域名查询网中国万网参考文献
深度选择器
深度选择器deep使用说明
在 Vue 中#xff0c;为了实现组件内部样式对组件外部元素的穿透覆盖#xff0c;可以使用 CSS 的 deep 选择器#xff08;也称为 或 /deep/#xff09;或 v-deep 指令。然而#xff0c;这两个方法在 Vue 3 中…参考文献
深度选择器
深度选择器deep使用说明
在 Vue 中为了实现组件内部样式对组件外部元素的穿透覆盖可以使用 CSS 的 deep 选择器也称为 或 /deep/或 v-deep 指令。然而这两个方法在 Vue 3 中已经被废弃推荐使用 ::v-deep 伪类选择器。
示例
templatediv classmy-component!-- ... --/div
/templatestyle scoped langless
.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) {}
