Vue3 里 CSS 深度作用选择器 :global

什么是 :global(.test)

在 Vue3 的 <style scoped> 中,:global() 是用来声明全局样式 的!

意思是:即使你的 <style> 是 scoped 的,:global(.test) 里面的样式也是全局生效的!


✏️ 举个例子

vue 复制代码
<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,比如:

css 复制代码
.button {
  :global(.icon) {
    margin-right: 8px;
  }
}

意思是:.button .icon,但是 .icon全局的 class

相关推荐
IT_陈寒17 分钟前
Vue3性能提升30%的秘密:5个90%开发者不知道的组合式API优化技巧
前端·人工智能·后端
我是华为OD~HR~栗栗呀30 分钟前
华为od-22届考研-C++面经
java·前端·c++·python·华为od·华为·面试
老黄编程33 分钟前
FireFox如何滚动截屏?
前端·firefox
九皇叔叔34 分钟前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途2 小时前
HTML-CSS项目练习
前端·css·html
@AfeiyuO2 小时前
el-table 表格嵌套表格
前端·elementui·vue
我是华为OD~HR~栗栗呀3 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java3 小时前
vivo响应式官网
前端·css·html·1024程序员节
web打印社区9 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗9 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架