能，但必须确保变量已在作用域内定义；var() 不区分伪类，只看当前元素能否继承变量，伪类不改变继承链，:root 声明最稳定，拼写、单位、权重、shadow dom 等均影响生效。
伪类选择器里能直接用 var() 吗？
能，但必须确保变量已在作用域内定义——var() 本身不区分是否在伪类中，它只看当前元素能否继承到该变量。伪类（如 :hover、:focus）不改变继承链，所以只要变量在 :root 或父级声明了，伪类里调用就完全合法。
:root 声明的变量在 :hover 中失效的常见原因
不是语法限制，而是作用域或值本身出问题。典型情况包括：
-
--color-primary拼写成--color-primarye，var(--color-primarye)静默回退到初始值 - 变量值非法，比如
--size: 12缺单位，导致整条声明被浏览器丢弃，后续var(--size)查不到有效定义 - 在
body或局部选择器里声明变量，而伪类目标元素不在其后代链中（例如变量在.card内声明，但:hover作用于button且不在.card里） - 用了
all: unset或inherit: none等重置样式，中断了自定义属性继承
在 :focus-visible 里用 var() 要注意什么？
和普通伪类一样，但需额外留意 fallback 是否合理：
-
outline-color: var(--focus-outline, #007bff)是安全写法；没 fallback 的话，变量未定义会导致 outline 消失 - 避免在
var()外拼单位：padding: var(--space)rem错误，应写成--space: 0.5rem，再用padding: var(--space) - 不要在
:focus-visible块里重新声明同名变量（如--focus-outline: red），这会覆盖全局值，影响其他地方
为什么 html { --x: red; } 在伪类里有时不生效？
因为 html 选择器权重虽与 :root 相同（都是 0-1-0），但实际解析中 :root 更稳定：
- 某些旧版 Safari 对
html声明的变量继承支持不一致 - Shadow DOM 边界内，
html声明可能被隔离，而:root仍能穿透 -
:root是规范指定的“文档作用域锚点”，语义明确，不会被组件库或框架的嵌套样式意外覆盖
变量作用域和继承逻辑比看起来更隐蔽——它不依赖选择器类型，而依赖元素树位置和声明有效性。写错一个分号、漏一个单位、大小写不一致，都可能导致伪类里 var() 回退到 fallback 或空白值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
