不能。CSS自定义属性（如--my-color）无法被选择器直接匹配，规范中不存在[--accent]这类语法；其作用是通过var()在级联作用域中参与样式计算，而非作为选择条件。
自定义属性能被选择器直接匹配吗
不能。--my-color 这类 CSS 自定义属性（CSS Custom Properties）本身不是选择器可匹配的“特征”，浏览器不会因为某个元素声明了 --accent: blue 就让 [--accent] 这样的选择器生效——CSS 规范里根本不存在这种属性选择器语法。
那怎么实现“根据自定义属性值切换样式”
靠 var() + 级联作用域 + 选择器组合。自定义属性的价值不在“被选中”，而在“被计算后参与样式生成”。实际做法是：把变量设在某个选择器的作用域内，再用 var(--x) 在子元素或同级规则中引用它。
- 变量必须先声明（
--size: 16px），且声明位置决定了它的作用域（如.card内声明，只对.card及其后代生效） -
var(--size)必须出现在支持该变量作用域的声明块里，否则计算为unset - 无法用 JavaScript 动态读取某元素上所有自定义属性值并据此加 class——得手动监听、判断、操作 class
:root {
--primary: #007bff;
}
.btn {
background-color: var(--primary);
}
.btn:hover {
--primary: #0056b3; /* 覆盖 :root 的值 */
background-color: var(--primary); /* 此处生效新值 */
}伪类/伪元素里能用自定义属性吗
可以，但要注意作用域和继承性。伪元素（如 ::before）默认继承宿主元素的自定义属性，所以只要宿主上有定义，就能用 var()；伪类（如 :hover）本身不继承，但它的样式块仍处于宿主元素的作用域内，因此也能访问宿主已声明的变量。
-
div:hover { --scale: 1.1; transform: scale(var(--scale)); }✅ 有效 -
div::before { content: ""; background: var(--bg, #eee); }✅ 继承父级--bg -
div[style*="--bg"]❌ 无效：style 属性字符串里含--bg不代表该属性被解析为 CSS 变量
想“按变量值做条件样式”只能靠 JS 吗
纯 CSS 没有 if (--theme === 'dark') 这种逻辑。目前唯一标准方案是：用自定义属性控制 class 切换，再由 class 驱动样式。比如：
立即学习“前端免费学习笔记（深入）”；
html[data-theme='dark'] {
--text: #fff;
--bg: #1a1a1a;
}
html[data-theme='light'] {
--text: #333;
--bg: #fff;
}
body {
color: var(--text);
background: var(--bg);
}关键点在于：自定义属性是“动态样式数据”，不是“选择依据”。真正起筛选作用的，永远是选择器本身（class、属性、伪类等），变量只是让这些选择器背后的样式更灵活。
