CSS变量不能用于选择器名称，因为选择器语法要求静态字面量，而var()是运行时计算值，浏览器在解析阶段即丢弃非法字符，导致规则静默失效；唯一可行路径是JS拼接字符串并操作class。
CSS变量不能用于选择器名称，因为选择器语法要求标识符在解析时必须是静态字面量，而var(--name)是运行时计算值，浏览器根本不把它当选择器的一部分处理。
为什么.class-name[style*="var(--color)"]这类写法完全无效
选择器中的属性值匹配（如[data-theme="dark"]）只接受字符串字面量或属性值本身，不支持var()函数。浏览器解析选择器阶段就完成了语法校验，此时CSS变量尚未计算——var(--color)直接被当作非法字符丢弃，整条规则静默失效。
- 写
[data-color="var(--primary)"]：浏览器尝试匹配字面量"var(--primary)"这个字符串，不是变量展开后的值 - 写
.<code>var(--prefix)-btn：CSS解析器报语法错误，根本不会进入样式计算流程 - 用JS拼接
document.querySelector("." + getComputedStyle(el).getPropertyValue("--prefix") + "-btn")：这是唯一可行路径，但必须由JS完成字符串拼接，CSS自身不参与
想根据CSS变量动态切换样式类，只能靠JS驱动
比如你希望--theme为"dark"时启用.theme-dark类，不能指望.theme-var(--theme)这种写法——它连语法都不合法。正确做法是监听变量变化并手动切换类名：
- 用
el.style.getPropertyValue("--theme")读取当前值 - 配合
MutationObserver监听style属性变更，或用requestAnimationFrame轮询（注意性能） - 执行
el.classList.toggle("theme-dark", value === "dark")，而非试图构造动态选择器
构建工具可能让问题更隐蔽
PostCSS、Vite或Webpack的CSS in JS方案如果自动注入含变量的选择器（例如插件误将${theme}拼进类名），会导致生成的选择器名含非法字符（如.theme--dark开头双短横线），最终document.querySelector(".theme--dark")返回null。
立即学习“前端免费学习笔记（深入）”；
- 检查构建产物中实际输出的class名是否符合CSS规范（字母开头、仅含
-和_） - 避免在Sass/Less中用
#{$var}-item生成class，除非确保$var值始终合法 - Vue/React中动态绑定class时，优先用对象语法
:class="{ 'active': isActive }"，而非模板字符串拼接
真正容易被忽略的是：选择器无效不会报错，DevTools里也看不到对应规则——它就像没写过一样。排查时得先确认class名是否真实存在于DOM节点的className属性里，而不是盯着CSS文件找“为什么没生效”。
