直接在目标容器选择器里重新声明同名变量即可实现局部覆盖，因为CSS变量作用域由声明位置决定：.card { --text-color: #222; }使所有后代读取该值；:root仅影响全局，伪类声明只作用于伪元素自身，不继承给子元素；命名需带组件前缀（如--card-bg）并声明在组件根容器上，JS更新应操作具体元素而非documentElement。
直接在目标容器选择器里重新声明同名变量即可，不需要特殊语法或嵌套结构。
为什么不能在:root或伪类里改变量来实现局部覆盖
CSS变量没有块级作用域，:root永远只匹配<html>元素，写:root { --color: red }就是全局改；伪类如button:hover里声明--color，该变量只对button:hover::before这类伪元素自身生效，不会影响button内部的子元素。真正起效的是让变量声明落在容器元素上：
-
.card { --text-color: #222; }→ 所有.card后代读var(--text-color)都取这个值 -
.card.warning { --text-color: #d32f2f; }→ 更具体的容器覆盖更宽泛的容器 - 别写
button:hover { --text-color: red; }然后指望button span变色——它不会
怎么确保重写只影响目标组件，不波及其他模块
关键在命名空间和声明位置：
- 变量名必须带组件前缀，比如
--card-bg、--badge-status-color，避免和--bg这种泛用名冲突 - 声明必须写在组件根容器上，如
.card { --card-bg: #f8f9fa; }，而不是子元素.card-header里 - 如果用JS动态更新，操作
cardEl.style.setProperty('--card-bg', '#333')，而不是document.documentElement.style - 第三方库（如Element Plus）的变量如
--el-color-primary可直接覆盖，但大小写和前缀必须完全一致
媒体查询中重写变量为什么没反应
常见失效原因是变量声明和使用没在同一个匹配上下文中：
立即学习“前端免费学习笔记（深入）”；
-
:root里定义基础值是必须的，否则小屏下var(--gap)直接无效 - 所有依赖该变量的样式规则，要么放进同一
@media块里，要么确保选择器能被重新匹配（比如用.theme-desktop类比纯@media更可控） - 变量值不能带引号：
--bg-url: img/phone.jpg✅，--bg-url: "img/phone.jpg"❌（url(var(--bg-url))会拼出非法语法） -
@media条件本身不能用变量：@media (min-width: var(--bp-sm))会被浏览器静默丢弃，断点必须写死为768px等字面量
最容易被忽略的一点：变量查找只看DOM祖先链上“谁最近声明了它”，和选择器权重、源文件顺序、是否嵌套都无关。调试时打开DevTools → Computed面板搜--xxx，点开箭头就能看到值从哪来、被谁继承、有没有被划掉——别靠猜。
