什么是 :global(.test)？
在 Vue3 的 <style scoped> 中，:global() 是用来声明全局样式的！
意思是：即使你的 <style> 是 scoped 的，:global(.test) 里面的样式也是全局生效的！
✏️ 举个例子
<template><div class="test">Hello World</div>
</template><style scoped>
:global(.test) {color: red;font-size: 24px;
}
</style>
- 这里
.test是 全局的，不会被 scope id 限制。 - 页面上任何
.test元素都会被染成红色，不管它在哪个组件里！
🎯 小总结
| 写法 | 意义 |
|---|---|
:deep(.xxx) | 穿透作用域，选到子组件内部 |
:global(.xxx) | 声明全局样式，不加任何 scope id |
⚡ 注意点
:global()里面的选择器是完全裸奔的，全局污染，要小心命名冲突。- 最好配合 BEM 命名或者加前缀，比如
.myapp-test，避免污染其他地方。
🚀 扩展一下（组合用法）
有时候也可以写局部 global，比如：
.button {:global(.icon) {margin-right: 8px;}
}
意思是：.button .icon，但是 .icon 是全局的 class。
