CSS自定义属性遵循继承链就近原则，即子元素读取离它最近的祖先元素上声明的有效变量；button { --color: red; } 生效是因为变量绑定到button自身并可被其后代继承，而 :root button { --color: red; } 无效是因为变量被绑定到匹配的button元素而非其祖先，无法提供继承源。
CSS自定义属性的“就近原则”不是选择器权重竞争，而是继承链上最近一次有效声明——卡片局部主题覆盖必须在卡片容器自身或其直接父级上重声明变量，而不是试图覆盖 :root 或依赖高权重选择器。
为什么 button { --color: red; } 能生效，但 :root button { --color: red; } 不能
CSS变量查找只看DOM树上的祖先是否声明过该变量，不看选择器来源或权重。浏览器解析 :root button { --color: red; } 时，会把变量声明绑定到 button 元素本身（因为它是规则中的关键选择器），但该声明只对 button 的后代生效；而 :root 是根元素，:root button 匹配的是根下的 button，它本身不是祖先，无法为子元素提供继承源。
-
:root { --primary: #007bff; }声明在顶层，所有未被覆盖的地方都继承它 -
.card { --primary: #28a745; }才是真正起效的局部覆盖：.card 及其所有后代（包括.card button、.card .title）读var(--primary)都拿到绿色 - 写成
.card button { --primary: #dc3545; }也可以，但只影响该 button 及其内部伪元素（如::before），不影响同级其他元素
.card 内部改变量后，子组件样式没变？检查三处硬性断点
变量值变了但视觉无反应，大概率不是 JS 没执行，而是引用链断裂：
- 子元素样式没用
var(--primary)，而是写了死值，比如color: #007bff;或background-color: var(--bg, #fff);但--bg根本没声明 - 变量声明在错误层级：比如在
.card-header里写了--primary，但.card-footer读不到——它不在这条继承链上 - 用了
!important强制覆盖了变量引用，例如color: var(--primary) !important;被另一条color: #333 !important;干掉了
媒体查询里动态切主题，别全堆在 :root
如果只想让卡片响应屏幕变化，不要在 :root 里统一改全局变量——那样整个页面的按钮、表单、标题都会跟着动。正确做法是把变量声明收束到卡片作用域内：
:root {
--card-padding: 1rem;
}
.card {
--card-padding: 1rem;
}
@media (max-width: 768px) {
.card {
--card-padding: 0.75rem;
}
}
.card-content {
padding: var(--card-padding);
}
这样改的只是 .card 容器及其后代，不影响其他组件；且避免了 :root 变量被意外复用导致的跨组件干扰。
伪元素和 @keyframes 是变量“盲区”，得提前兜底
::before、::after 能继承父元素声明的变量，但 @keyframes 块完全隔离——它不参与CSS继承，也不能读取父级变量。所以如果你在卡片里用动画控制背景色渐变，不能写：
.card { --bg: #28a745; }
@keyframes fade {
to { background-color: var(--bg); } /* ❌ 无效 */
}
必须把变量值“拍平”进动画定义，或靠外层类名兜底：
.card.theme-green { --card-bg: #28a745; }
.card.theme-green .card-content {
animation: fade-green 0.3s;
}
@keyframes fade-green {
to { background-color: #28a745; }
}
真正容易被忽略的，是变量声明位置和继承起点之间的物理距离——哪怕 DOM 上只隔一层，只要中间没声明，子元素就读不到；它不靠“靠近选择器”，而靠“靠近祖先节点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
