CSS自定义属性如何配合选择器使用？

CSS自定义属性（如--color）本身不能被选择器直接匹配——不存在[--color]这类语法，规范中也未定义此类选择机制；它的真正价值在于通过var()函数在级联作用域中动态参与样式计算，实现“一处定义、多处响应”的灵活主题控制。要根据变量值切换样式，需借助选择器（如[data-theme="dark"]）预先设定变量值，再由var()引用生效；伪类和伪元素可正常使用变量（依赖作用域与继承），而纯CSS不支持基于变量值的条件判断，动态逻辑仍需JavaScript配合class操作。简言之，自定义属性是样式的“活水源”，而非选择器的“筛选器”。

不能。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、属性、伪类等），变量只是让这些选择器背后的样式更灵活。

好了，本文到此结束，带大家了解了《CSS自定义属性如何配合选择器使用？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！