:root用于定义全局CSS变量，如颜色和尺寸，支持动态修改；:global则在组件化环境中声明全局样式规则，避免样式污染。两者结合可提升样式的可维护性和复用性。
在现代前端开发中，使用 CSS 的
:root和
:global可以有效定义全局样式，尤其在结合预处理器或 CSS-in-JS 框架时非常实用。下面分别说明它们的用法和区别。
:root 定义全局 CSS 变量
:root是一个伪类选择器，匹配文档的根元素（HTML 中通常是
<html>）。它最常用于定义全局 CSS 自定义属性（即 CSS 变量），这些变量可以在整个项目中复用。
- 变量定义在 :root 中，作用域覆盖整个页面
- 支持动态修改，适合主题切换等场景
示例：
<font face="Courier New" size="2">
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
--border-radius: 4px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size-base);
border-radius: var(--border-radius);
}
</font>
你可以在 JavaScript 中动态更改这些变量：
立即学习“前端免费学习笔记（深入）”；
<font face="Courier New" size="2">
document.documentElement.style.setProperty('--primary-color', '#dc3545');
</font>
:global 在组件化 CSS 中定义全局样式
:global不是原生 CSS 语法，而是某些构建工具（如 CSS Modules、Vue 的 <style scoped>、Sass、Less 或 PostCSS 插件）中提供的特性，用于在局部作用域中声明全局样式规则。
- 防止样式污染，同时允许特定规则“逃出”局部作用域
- 常见于 React + CSS Modules 或 Vue 单文件组件
在 Vue 中的例子：
<font face="Courier New" size="2">
<style scoped>
:global(.alert) {
font-weight: bold;
}
</style>
</font>
这段样式会应用到所有带有
class="alert"的元素，即使它们不在当前组件内。
在 CSS Modules 中：
<font face="Courier New" size="2">
:global(.container) {
max-width: 1200px;
margin: 0 auto;
}
</font>
这样
.container就不会被哈希化，成为真正的全局类名。
结合使用建议
实际项目中，可以将两者配合使用：
- 用
:root
管理颜色、间距、字体等设计变量 - 用
:global
处理需要跨组件生效的基础样式，如重置样式、布局类、工具类等
例如定义一个全局的间距系统：
<font face="Courier New" size="2">
:root {
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
}
:global(.mb-1) { margin-bottom: var(--space-sm); }
:global(.mb-2) { margin-bottom: var(--space-md); }
:global(.mb-3) { margin-bottom: var(--space-lg); }
</font>
基本上就这些。合理利用
:root和
:global，能让样式更灵活、可维护性更强，特别是在大型项目中。注意根据你的构建工具确认
:global是否支持以及具体写法。不复杂但容易忽略细节。
