CSS变量在:visited中被浏览器主动屏蔽，因隐私保护机制禁止其声明与读取，防止通过变量值泄露用户历史访问记录；仅color等极少数安全属性允许在:visited中生效。
CSS变量在:visited中根本不会生效，不是写法问题，是浏览器主动屏蔽
为什么--my-color在a:visited里被忽略？
浏览器明确禁止在:visited伪类中声明或修改任何 CSS 自定义属性（即--xxx）。这不是兼容性问题，而是隐私保护强制策略：防止脚本通过读取变量值反推用户历史访问记录。
以下写法看似合法，实则被静默丢弃：
a:visited {
--visited: true; /* ❌ 完全不生效 */
color: #551a8b; /* ✅ 只有这类安全属性才允许 */
}
调用getComputedStyle(el).getPropertyValue('--visited')得到的永远是:root或父级定义的初始值，绝非:visited中“设过”的值——因为那行根本没进样式引擎。
:hover和:focus里能用 CSS 变量吗？
可以，但要注意作用域和继承链是否断裂：
-
:hover、:focus、:active等动态伪类本身支持自定义属性，只要变量在对应元素或其祖先上已定义 - 如果变量只在
:root定义，div:hover能正常读取；但如果在div自身用style="--x: red"内联定义，div:hover也能继承到 - 真正容易出错的是：伪类规则里试图覆盖变量，却忘了变量必须先存在。例如：
button:hover { --bg: blue; }只有在button或上级已声明--bg时才有效，否则属于无效声明（不报错但无效果）
伪元素::before/::after中content为何影响变量读取？
伪元素默认不渲染，除非content属性被显式设置。很多开发者想用var(--icon)控制::before内容，却漏了这一步：
.btn::before {
content: var(--icon, "→"); /* ✅ 必须有 content 才能触发渲染和变量求值 */
color: var(--text-color);
}
若只写content: ""或完全省略content，整个伪元素不参与布局与样式计算，var()表达式根本不会被解析。
最常被忽略的一点：CSS 变量的“生效”不等于“可见”。它可能已被正确计算，但因伪类本身被限制（如:visited）、伪元素未激活（缺content）、或继承链在某层中断（比如all: initial重置了所有继承），导致最终样式没体现出来。调试时优先检查 DevTools 的「Computed」面板里变量值是否为预期结果，而不是直接怀疑语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
