css自定义属性无法用于选择器名称，因为选择器必须在解析阶段静态确定，而var()是运行时计算的；解析器将var(--name)视为非法字符序列，直接丢弃整条规则。
为什么CSS自定义属性无法作为选择器名称动态插入？
因为选择器必须在样式表解析阶段就确定，而var(--name)是运行时才计算的值——浏览器压根不会等它，直接报错或静默丢弃整条规则。
CSS解析器根本不认识var()在选择器里的位置
选择器语法要求所有标识符（类名、属性名、伪类等）必须是静态字符串。当你写.btn--<var></var>或[data-theme="var(--mode)"]时，CSS解析器在第一步词法分析就卡住：var(--mode)不是合法标识符，也不是合法字符串字面量，而是非法字符序列。结果就是整条CSS规则被跳过，不参与后续任何计算。
-
.theme-<var></var>→ 解析错误，控制台可能报Invalid selector或完全无提示 -
[class*="var(--suffix)"]→ 匹配的是字面量"var(--suffix)"这个字符串，不是变量展开后的值 -
:is(.<var></var>-item)→ 语法错误，:is()内部仍需合法选择器
想“动态选中”只能靠JavaScript拼接字符串
唯一可靠路径是把变量值读出来，再用JS构造选择器并查询或操作DOM。CSS自身不提供运行时选择器生成能力。
- 先读值：
getComputedStyle(document.documentElement).getPropertyValue('--theme')，注意返回带空格的字符串，需.trim() - 再拼选择器：
document.querySelector('.theme-' + themeValue)，确保themeValue是合法类名（如过滤掉空格、特殊符号） - 若用于事件绑定或批量操作，建议缓存拼接结果，避免重复计算
构建工具可能掩盖问题，但不会解决本质限制
PostCSS插件、Vite的cssVars或Sass的@each看似能“生成类名”，但它们是在构建时静态展开的，和运行时var()无关。一旦你依赖JS修改了--theme，这些预生成的类名就失效了。
- Sass中
.theme-#{$theme}→ 编译后变成.theme-dark，不可变 - Vite插件注入
.theme-var(--theme)→ 浏览器直接忽略，因为var(--theme)不在合法选择器位置 - 真正需要运行时响应的场景，必须由JS驱动class切换，而不是指望CSS自己“活过来”
最易被忽略的一点：很多人以为加个!important或改用:global就能绕过，其实:global(--theme)语法本身就不合法——:global只作用于选择器，不作用于属性名或函数调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
