伪元素无法重写继承的CSS变量，因其不参与继承链，仅继承宿主元素计算后的样式值而非变量本身；需通过宿主元素预设变量或在伪元素规则中显式覆盖最终属性值。
伪元素无法直接重写继承的CSS变量是因为它不参与继承链
伪元素 ::before 本身不是 DOM 节点，它没有父-子继承关系；它只从**宿主元素（即声明它的那个真实元素）上继承计算后的样式值**，而不是变量本身。也就是说，--color-primary 这类自定义属性不会“传下去”，浏览器根本不会把变量名和值一起继承过去——它只继承最终被 var(--color-primary) 解析出来的颜色值（比如 #007bff）。
想在::before里用不同配色，必须显式重新声明变量或覆盖计算值
你不能靠“在 ::before 里改 --color-primary”来影响自身，因为变量作用域只到宿主元素这一层。可行路径只有两条：
- 在宿主元素上用内联样式或 JS 动态设置不同变量值，再让
::before读取——但这就不是“重写”，而是提前准备多套变量 - 直接在
::before规则里覆盖最终样式属性，比如：color: var(--accent-color, #ff6b6b);，其中--accent-color是另一个独立声明的变量，且需确保它在::before的作用域中可访问（即定义在:root或宿主元素上） - 若变量仅定义在组件选择器内部（如
.card { --text-color: red; }），则::before仍能继承其计算值，但无法修改该变量本身——改了也只对宿主元素生效，不影响伪元素
常见错误：以为给::before加style属性或setProperty就能生效
这行不通，因为：
-
::before没有 DOM 节点，element.style.setProperty('--x', 'y')无处调用 -
getComputedStyle(element, '::before')可读取计算值，但返回的是只读对象，无法写入 - 试图用
document.documentElement.style.setProperty()全局改变量，会影响所有用到它的地方，不是精准控制
真正可控的做法是分离变量职责 + 显式传递
例如：
:root {
--primary: #007bff;
--primary-hover: #0056b3;
}
<p>.button {
--button-fg: var(--primary);
}</p><p>.button:hover {
--button-fg: var(--primary-hover);
}</p><p>.button::before {
content: '';
background-color: var(--button-fg); /<em> ✅ 此时会随宿主变化而变 </em>/
}</p>
关键在于：变量要定义在足够高的作用域（如 :root），宿主元素通过局部 --button-fg 做中间映射，::before 只负责消费——这样既解耦，又避免误以为“伪元素能自己改变量”。
最容易被忽略的一点是：很多人在调试时用 getComputedStyle(el, '::before').getPropertyValue('--x') 得到空字符串，就以为变量没传进去，其实只是它压根不继承变量名，只继承解析结果。别查变量是否存在，去查 color 或 background-color 的最终值更实在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
