[data-*] 语法非法，因CSS规范禁止*用于属性名通配，仅支持值匹配如[attr*="foo"]；Chrome/Edge忽略，Firefox报错；正确写法需全小写连字符如[data-user-id]。
不能用 [data-*] 选中所有带 data- 前缀的元素——这个写法根本不符合 CSS 标准，浏览器会静默忽略或报错，不是兼容性问题，是语法非法。
为什么 [data-*] 会失效
CSS 规范里，* 只允许出现在属性值匹配位置（如 [attr*="foo"]），不能用于属性名通配。Chrome/Edge 忽略它；Firefox 直接报 Expected identifier or string。同样无效的还有：[data]（只匹配叫 data 的属性）、[data^="data-"]（^= 是值匹配操作符，不作用于属性名）。
[data-xxx] 必须全小写 + 连字符
HTML 中写 data-userId 或 data-user-id 看似差不多，但 CSS 选择器只认后者：[data-user-id]。前者在 JS 里用 dataset.userId 也读不到，因为浏览器解析时强制转成小写+连字符格式。
- ✅ 正确：HTML 写
data-api-version="v2"，CSS 写[data-api-version="v2"] - ❌ 错误：HTML 写
data-apiVersion="v2"，CSS 用[data-apiVersion]—— 不生效 - ⚠️ 注意：值含中文或符号时，HTML 可加双引号，但 CSS 选择器里不用引号；只有
attr()函数里才需转义，如content: attr(data-hint);
匹配存在性、全等、空格分隔值的差异
[data-loading] 只检查属性是否存在，不管有没有值、值是不是空字符串或非法字符——<div data-loading>、<button data-loading=""> 全部命中。常见误操作是写成 [data-id=""] 去“找没赋值的”，结果漏掉省略等号的合法写法；真要区分“有属性但值为空”，得用 [data-id=""]；而“有属性且值非空”得靠 [data-id]:not([data-id=""])。
立即学习“前端免费学习笔记（深入）”；
-
[data-role="admin"]：要求值**完全一致**，多一个空格都不行 -
[data-role~="admin"]：只对空格分隔的多值有效（类似class），能匹配data-role="admin header"，但不匹配data-role="admin-header" - 若值是 JSON 字符串（如
data-config='{"theme":"dark"}'），别用~="dark"，它会按单词切分，可能意外命中"dark-mode"里的dark
组合多个 data- 属性时的性能与可维护性
写 [data-section="user"][data-status="active"] 比单用 .user-active 更语义化，但浏览器必须逐个检查两个属性是否存在，DOM 越大、匹配越慢；滚动区域里频繁重排时，这类选择器可能比单类名慢 10%–20%。
- 优先用
[data-*]替代冗余 class，但别堆砌超过 3 个属性条件（如[a][b][c][d]） - 避免在动画帧里调用
querySelectorAll('[data-*]')，改用document.querySelectorAll('[data-*]')缓存后复用 - 若需大小写不敏感匹配（如
data-name="John"和data-name="JOHN"都要中），加i标志：[data-name="john" i]（Chrome 63+、Firefox 64+ 支持） - 别把
data-和 CSS 自定义属性（--color-primary）混淆：data-是 HTML 属性，可被选择器读取；--*是样式变量，只能在声明块里用var(--*)引用
真正容易被忽略的是：你通过 JS 修改了 dataset.xxx，样式会立刻响应；但如果该元素同时开了 will-change: transform，合成层可能卡住重绘，导致视觉延迟——这种时候得关掉 will-change 或换用 transform: translateZ(0)。
