:global() 是 CSS Modules 中唯一规范支持的退出局部作用域方式，它使括号内选择器不参与哈希重命名而原样输出；必须包裹完整选择器片段（如 :global(.btn:hover)），不可拆分；不能用于 @keyframes 或 @font-face；混用时需确保第三方类全量包裹并前置加载。
什么是 :global()，它为什么能“逃逸”
:global() 是 CSS Modules 中唯一被规范支持的退出局部作用域的方式。它不是“绕过”模块化，而是显式声明：括号里的选择器不参与哈希重命名，原样输出到最终 CSS 中。没有它，写 .btn:hover 会被编译成类似 .Button_button__abc123:hover，而 DOM 中根本没有这个类名，伪类自然失效。
:global() 必须包裹完整选择器片段
常见错误是只包一部分，比如 .wrapper .btn:global(:hover) 或 :global(.btn):hover —— 这两种都无效。浏览器解析时会把 :hover 当作伪类附加在局部类上，而 :global() 只对括号内整个字符串生效。
-
:global(.btn:hover)✅ 正确：整个选择器透出，匹配 DOM 中真实的.btn:hover -
:global(.modal) .close✅ 可以：.modal全局，.close仍按局部规则处理（除非也加:global()） -
:global(.btn):focus-within❌ 错误：:focus-within没被包裹，编译后变成.btn__xyz:focus-within，DOM 中无此元素
不能在 @keyframes 或 @font-face 里用 :global()
@keyframes 和 @font-face 本身就不受 CSS Modules 作用域限制，它们的名称和定义天然全局。所以在这些规则里写 :global(.my-animation) 不但多余，还会触发构建工具警告甚至报错。
- 动画名直接写
@keyframes slideIn { ... }即可，JS 中用animation: slideIn 0.3s引用 - 字体名同理：
@font-face { font-family: 'MyFont'; src: url(...); }，之后任何地方都能用font-family: 'MyFont' - 试图在
@keyframes内部写:global(.step) { opacity: 0; }是语法错误，loader 会拒绝编译
混用局部和全局类时的边界陷阱
最易被忽略的是“混合选择器”的语义断裂。例如你写 .my-component :global(.btn-primary)，这表示：当前组件内、某个子元素上有 btn-primary 类——只要 DOM 结构满足，就能命中。但如果你写 .my-component .btn-primary（没包 :global），构建工具会尝试把 .btn-primary 也哈希化，结果生成类似 .MyComponent_root__123 .MyComponent_btn-primary__456，而真实 DOM 中只有 btn-primary，样式彻底丢失。
立即学习“前端免费学习笔记（深入）”；
- 第三方库（如 Bootstrap）的类必须全量用
:global()包裹，且确保其 CSS 在模块文件之前加载，否则可能被覆盖 - 空声明
:global(.sr-only) {}是安全做法：只透出类名，样式由外部统一提供，不破坏模块隔离价值 - 不要在同一个规则里混用局部类和未包裹的全局类名，比如
.header :global(.btn) .icon——.icon会被局部化，但你本意可能是让它也属于第三方图标体系
