:root选择器用于定义全局CSS变量，提升代码可维护性。它匹配根元素，优先级高于html，支持主题切换、响应式设计等场景，通过var()使用变量并可设默认值，注意大小写敏感且需配合calc()进行运算。
:root 选择器是 CSS 中定义全局变量的强大工具，它匹配文档的根元素（在 HTML 中即 html 元素），可以用来声明自定义属性（也叫 CSS 变量），这些变量在整个样式表中都可以访问和使用。通过这种方式，我们可以集中管理颜色、字体、间距等常用样式值，提升代码的可维护性和一致性。
使用 :root 定义全局变量
在 :root 中定义自定义属性时，属性名以两个连字符（--）开头。这些变量可以在整个 CSS 文件中通过 var() 函数调用。
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
--border-radius: 8px;
--spacing-unit: 1rem;
}
之后在其他选择器中使用这些变量：
.button {
background-color: var(--primary-color);
font-size: var(--font-size-base);
border-radius: var(--border-radius);
padding: var(--spacing-unit);
}
为什么用 :root 而不是 html？
虽然 html 选择器也能定义变量，但 :root 的优先级更高，并且在所有情况下都能正确匹配根元素（比如在 SVG 或 XML 文档中）。在 HTML 页面中，:root 实际上比 html 选择器的优先级高一点，能更可靠地设置全局默认值。
立即学习“前端免费学习笔记（深入）”；
实际应用场景与好处
- 主题切换：通过 JavaScript 动态修改 :root 中的变量值，实现深色/浅色主题切换。
- 响应式设计：结合媒体查询，在不同屏幕尺寸下更新变量值。
- 团队协作：统一设计系统中的颜色、间距规范，减少样式冲突。
- 易于维护：只需修改一处变量，即可全局生效，避免重复查找替换。
注意事项
确保使用 var() 函数读取变量，否则不会生效。可以为变量设置默认值：
.component {
color: var(--text-color, #333); /* 如果 --text-color 未定义，则使用 #333 */
}
变量不支持拼接或数学运算（除非配合 calc()），且对大小写敏感（--Color 与 --color 不同）。
基本上就这些。合理利用 :root 定义全局变量，能让 CSS 更清晰、灵活，是现代前端开发中推荐的做法。不复杂但容易忽略细节。
