data-属性选择器需html真实存在且值完全匹配（含大小写、空格），引号不可省略；css变量不能直接响应data-变化，须通过预设选择器声明变量并利用作用域继承实现动态样式。
![css如何通过自定义属性匹配样式_使用[data-]类型的属性选择器](https://img.php.cn/upload/article/000/969/633/177329703289866.jpeg)
data-* 属性选择器怎么写才生效
必须确保 HTML 元素上真实存在对应 data- 属性，且值完全匹配（包括大小写和空格）。浏览器不会“模糊匹配”或忽略引号差异。
-
data-theme="dark"只能被[data-theme="dark"]匹配，[data-theme=dark]在部分旧浏览器中可能失效（未加引号时只允许 ASCII 字母、数字、-、_） - 属性值含空格或特殊字符（如
data-id="user 123"）必须用引号包裹选择器：[data-id="user 123"] - HTML 中写
data-status="active"，CSS 里写[data-status="Active"]—— 大小写不一致就完全不生效
如何用 CSS 自定义属性（CSS 变量）配合 data-* 动态控制样式
CSS 自定义属性本身不能直接响应 data- 属性变化；它们是静态声明的。真正起作用的是：用 data- 作为“开关”，在不同元素上切换类名或属性值，再让 CSS 变量基于这些状态计算。
- 不要试图写
:root { --color: attr(data-color); }——attr()在非content属性中不被支持，且无法触发重绘 - 推荐做法：为每个
data-值预设一组变量，例如：[data-size="large"] { --font-scale: 1.25; }<br>[data-size="small"] { --font-scale: 0.875; }<br>body { font-size: calc(var(--font-scale, 1) * 1rem); } - 注意：变量作用域由选择器决定，
[data-theme="dark"]内部声明的--bg不会污染外部，这是优势也是限制——不能跨层级“继承”数据
常见错误：为什么 [data-*] 选择器突然不生效了
多数时候不是语法错，而是 DOM 或加载时机问题。
- JavaScript 动态添加
data-属性后，CSS 已就绪，但浏览器没重新计算样式 —— 实际上它会自动重算，除非你用了will-change: transform等触发合成层，反而阻碍了属性监听 - Shadow DOM 中，
[data-]选择器默认无法穿透，必须在 shadow root 内部定义样式，或使用:host([data-open]) - Vue/React 等框架里，
v-bind:data-status="status"或data-status={status}渲染出的属性名若含大写字母（如data-Status），CSS 选择器仍需小写：[data-status]—— HTML 属性名始终不区分大小写，但解析后统一转为小写
性能与兼容性要注意什么
[data-*] 选择器本身性能没问题，但滥用嵌套或高频更新会拖慢渲染。
立即学习“前端免费学习笔记（深入）”；
- 避免写
div[data-role="button"] span[data-state="hover"]这类深层组合 —— 每次状态变更都触发整条路径重排 - IE11 支持
[data-x]，但不支持属性值带引号的写法（如[data-x="y"]），需降级为[data-x=y]并约束值格式 - 如果用
data-控制主题切换，别在每个组件里重复声明变量，统一在顶层容器上设置，靠继承向下传递，减少样式表体积
CSS 的 data- 匹配本质是静态属性快照，它不监听变化，也不执行逻辑。所谓“动态”，全靠你手动切换属性值 + 合理设计变量作用域。最容易被忽略的是：你以为改了 data- 就自动刷新样式，其实只是浏览器按规则重新走了一遍匹配流程——没匹配上，就是没效果。
