在 CSS 中，:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式。
1. 为什么使用 :root 定义全局 CSS 变量？
- 全局可用 ：在
:root中定义的变量可以在整个文档的任何地方使用。 - 优先级较低 ：
:root的优先级低于局部定义的变量，方便覆盖。 - 动态修改 ：可以通过 JavaScript 动态调整
:root变量，实现主题切换、暗黑模式等。
2. 基本用法
（1）在 :root 中定义全局变量
css
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--bg-color: #f5f5f5;
--font-size: 16px;
--border-radius: 4px;
}（2）在 CSS 中使用这些变量
css
body {
color: var(--text-color);
background-color: var(--bg-color);
font-size: var(--font-size);
}
.button {
background-color: var(--primary-color);
border-radius: var(--border-radius);
}
.button:hover {
background-color: var(--secondary-color);
}3. 通过 JavaScript 动态修改 :root 变量
（1）修改单个变量
javascript
// 获取根元素（:root 对应 document.documentElement）
const root = document.documentElement;
// 修改 CSS 变量
root.style.setProperty('--primary-color', '#e74c3c');
root.style.setProperty('--bg-color', '#1a1a1a');（2）批量修改变量（切换主题）
javascript
const themes = {
light: {
'--text-color': '#333',
'--bg-color': '#f5f5f5',
'--primary-color': '#3498db',
},
dark: {
'--text-color': '#fff',
'--bg-color': '#1a1a1a',
'--primary-color': '#e74c3c',
},
};
function applyTheme(themeName) {
const theme = themes[themeName];
if (theme) {
Object.keys(theme).forEach((key) => {
document.documentElement.style.setProperty(key, theme[key]);
});
}
}
// 切换到暗黑模式
applyTheme('dark');（3）读取当前 :root 变量的值
javascript
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
console.log(primaryColor); // 输出当前值（如 "#e74c3c"）4. 实际应用示例
（1）暗黑模式切换
css
:root {
--text-color: #333;
--bg-color: #fff;
}
[data-theme="dark"] {
--text-color: #f0f0f0;
--bg-color: #121212;
}
body {
color: var(--text-color);
background-color: var(--bg-color);
transition: background-color 0.3s, color 0.3s;
}
javascript
// 切换暗黑模式
document.documentElement.setAttribute('data-theme', 'dark');（2）动态调整字体大小
css
:root {
--font-size: 16px;
}
body {
font-size: var(--font-size);
}
javascript
// 增大字体
document.documentElement.style.setProperty('--font-size', '18px');5. 最佳实践
-
命名规范 ：使用
--component-state-property格式（如--button-hover-bg）。 -
提供默认值 ：
csscolor: var(--text-color, #333); /* 如果 --text-color 未定义，则使用 #333 */ -
避免过度使用 ：只在真正需要全局控制的样式上使用
:root变量。 -
性能优化 ：减少频繁修改
:root变量，避免不必要的重绘。
6. 浏览器兼容性
- 所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持 CSS 变量。
- IE 不支持，如需兼容，可以使用 CSS 预处理器（如 Sass/Less）或 PostCSS 降级处理。
总结
| 方法 | 作用 | 示例 |
|---|---|---|
:root { --var: value } |
定义全局 CSS 变量 | :root { --primary: #3498db } |
var(--var) |
使用变量 | color: var(--primary) |
root.style.setProperty('--var', 'value') |
JS 修改变量 | root.style.setProperty('--primary', '#e74c3c') |
getComputedStyle(root).getPropertyValue('--var') |
JS 读取变量 | const val = getComputedStyle(root).getPropertyValue('--primary') |
通过 :root 全局管理 CSS 变量，可以让你的项目更灵活、更易于维护，并支持动态主题切换！ 🚀