伪类替代
在 Vue <style scoped> 中，如果需要覆盖子组件或第三方组件样式，可以使用 :global 来突破 scoped 作用域限制。
1. :global 基本用法
<style scoped>
:global(.test .t-radio-button__label) {
color: red;
}
</style>
等价于：
<style>
.test .t-radio-button__label {
color: red;
}
</style>
2. 使用场景
:global 主要用于：
-
覆盖 UI 组件库样式（如 TDesign、Element Plus）
-
修改子组件内部样式
-
scoped 无法覆盖的第三方样式
3. :deep 不生效时的替代方案
当 :deep() 无法生效或覆盖不成功时，可以使用“外层类 + global”的方式。
示例
<template>
<t-dialog
class="declare"
v-model:visible="visible"
:header="null"
:footer="null"
/>
</template>
<script setup>
import { ref } from 'vue'
const visible = ref(false)
const open = () => {
visible.value = true
}
defineExpose({
open
})
</script>
<style lang="less" scoped>
:global(.declare .t-dialog) {
padding: 0;
}
</style>
4. 选择器区别
.class1.class2
.class1.class2 {
}
表示同一个元素同时拥有两个 class：
<div class="class1 class2"></div>
.class1 .class2
.class1 .class2 {
}
表示父子关系：
<div class="class1">
<div class="class2"></div>
</div>
评论