css中的样式穿透

1. >>> 操作符

<style scoped>
/* 影响子组件的样式 */
.parent >>> .child {color: red;
}
</style>

注意：>>> 操作符在某些预处理器（如Sass）中可能无法识别，因为它不是标准的CSS语法。

2. /deep/ 选择器

/deep/ 选择器曾经是Vue中用于样式穿透的一种方式，但在Vue 3中已被废弃。

<style scoped>
/* 影响子组件的样式 */
.parent /deep/ .child {color: red;
}
</style>

3. :deep()伪类 (推荐)

在Vue 3中，推荐使用 :deep() 伪类来进行样式穿透。

<style scoped>
/* 影响子组件的样式 */
.parent :deep(.child) {color: red;
}
</style>

4. ::v-deep 伪类

在Vue 2中，可以使用 ::v-deep 伪类来进行样式穿透，Vue 3也支持这种写法。

<style scoped>
/* 影响子组件的样式 */
.parent ::v-deep .child {color: red;
}
</style>

5. :global() 伪类

:global() 伪类可以将样式应用到全局，而不是限制在当前组件内。

<style scoped>
/* 将样式应用到全局 */
:global(.some-global-class) {color: blue;
}
</style>

6. ::v-slotted() 伪类

::v-slotted() 伪类用于影响使用了 的子组件样式。

<style scoped>
/* 影响使用了 <slot> 的子组件样式 */
::v-slotted(.some-slotted-class) {color: green;
}
</style>