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>