css :global

作者：—只賣身不賣藝发布日期:2026-01-23 浏览:69

:global .global-class {
  color: blue;
}

.local-class {
  :global .another-global-class {
    background-color: red;
  }
}

:global 选择器：用于在 CSS 模块中定义全局样式。默认情况下，CSS 模块中的类名会被视为局部作用域，即它们只会应用于当前模块中的元素。使用 :global 可以将类名或选择器提升为全局作用域。
示例代码：
- .global-class 被定义为全局样式，因此它可以应用于整个项目中的任何地方。
- 在 .local-class 中嵌套的 .another-global-class 也被定义为全局样式，即使它位于一个局部类的选择器内部。
应用场景：当你需要在 CSS 模块中定义一些全局样式（例如公共样式类）时，可以使用 :global。这有助于避免命名冲突，同时保持某些样式在整个项目中的可用性。