css变量局部覆盖需在目标元素直接声明，而非嵌套:root；各状态应独立设变量并兼顾可访问性；伪元素和动画不继承变量，shadow dom需手动透传；变量按dom继承链就近生效，ie需双声明降级。
CSS变量局部覆盖对按钮状态无效，直接在按钮选择器里重声明同名变量才是正解
button 里写 :root { --color: red } 完全不生效
因为 :root 只匹配 元素，它在 button 选择器内部是语法错误，浏览器会忽略整条规则。真正起作用的是直接在目标元素上设变量：
-
button { --bg: #007bff; }→ 该按钮及其子元素（如button span）读var(--bg)都拿到#007bff -
.btn-primary { --bg: #28a745; }→ 所有带这个类的按钮用新背景色 - 不要试图用选择器权重“压过”全局变量——变量查找不看权重，只看继承链上最近一次有效声明
按钮各状态需独立控制变量，不能只靠一个 --color
悬停、点击、禁用态对颜色的语义和可访问性要求完全不同，硬套单变量会出问题：
-
button:hover不能只改--bg，还得同步保证文字对比度 —— 建议同时声明--text和--bg -
button:disabled不该复用lighten(--bg, 30%)，深色底上会发灰；应显式设--bg: #e9ecef; --text: #6c757d; -
button:focus-visible需要轮廓色变量（如--focus-ring），和背景/文字变量正交
避免在 @keyframes 或伪元素中依赖按钮变量
@keyframes 是独立作用域，不继承父级 CSS 变量；::before/::after 也不自动继承宿主元素的自定义属性：
-
button { --icon-size: 16px; }→button::before读不到var(--icon-size)，必须显式写button::before { --icon-size: 16px; } - 动画内不能用
var(--bg)，哪怕变量在button上已声明；得把关键值提前固化进动画规则，或用 JS 注入关键帧 - 如果按钮用了 Shadow DOM，变量更不会透传 —— 必须在 shadow root 内重新声明或通过
part暴露
变量覆盖不是“覆盖全局”，而是就近继承
所谓“局部覆盖”，本质是让后代元素沿 DOM 树向上查找时，优先碰到你刚声明的那个值。这和 JS 的作用域完全不同，没有块概念，只有继承链：
-
:root { --text: #333; }+.card { --text: #222; }+.card button { --text: #d32f2f; }→ 按钮内所有var(--text)都取#d32f2f，不是#222，更不是#333 - 变量值在计算样式阶段解析，不是运行时重算；改了
button的--text，其子元素立刻更新，但不会触发重排 - IE 完全不支持，降级必须写双声明：
color: #333; color: var(--text, #333);
真正难的不是怎么写变量，而是判断哪些状态值得抽成变量、哪些应该直接切类名——比如 3 种尺寸 × 4 种变体 × 5 种状态，用变量维护很快失控，此时 class 组合反而更清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
