CSS自定义属性以--开头，推荐在:root中定义全局变量，通过var()函数引用，支持局部作用域、默认值及JavaScript动态修改，适用于主题切换等场景。
在CSS中，可以通过自定义属性（也叫CSS变量）来实现可复用、易于维护的样式值。自定义属性以两个连字符（--）开头，可以在选择器中定义，并通过 var() 函数使用。
定义和使用自定义属性
自定义属性通常定义在CSS选择器内，推荐使用 :root 伪类来声明全局可用的变量，因为 :root 匹配文档根元素（通常是 html），确保变量在整个页面中可访问。
示例：
<font face="Courier New">
:root {
--main-color: #3498db;
--spacing: 16px;
--border-radius: 8px;
}
<p>.button {
background-color: var(--main-color);
padding: var(--spacing);
border-radius: var(--border-radius);
border: none;
color: white;
}
</font></p>上面代码中，--main-color、--spacing 和 --border-radius 是自定义属性，通过 var(--name) 在样式中引用。
立即学习“前端免费学习笔记（深入）”；
局部作用域的自定义属性
自定义属性支持CSS层叠和作用域。你可以在任意选择器中定义变量，其作用范围为该选择器及其后代元素。
例如：
<font face="Courier New">
.card {
--card-bg: #f0f0f0;
background: var(--card-bg);
padding: var(--spacing); /* 仍可使用全局定义的 spacing */
}
</font>如果某个变量未定义，var() 可以设置默认值：
<font face="Courier New">
.element {
color: var(--text-color, #333); /* 如果 --text-color 不存在，使用 #333 */
}
</font>动态修改自定义属性
自定义属性的一大优势是可以通过JavaScript动态修改，实现主题切换或动画效果。
JavaScript操作示例：
<font face="Courier New">
// 修改全局变量
document.documentElement.style.setProperty('--main-color', '#e74c3c');
<p>// 获取变量值
const color = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
</font></p>这种机制非常适合实现暗黑模式、用户自定义主题等交互功能。
基本上就这些。自定义属性让CSS更灵活，结合 var() 和 JavaScript，能实现强大的动态样式控制。不复杂但容易忽略的是命名规范和作用域管理，建议统一前缀如 --app-primary 避免冲突。
