[data-*] 无效是因为CSS标准未定义该语法，*仅允许在属性值匹配中使用（如[attr*="foo"]），不能用于属性名；浏览器会忽略或报错。
不能用 [data-*] 选中所有带 data- 前缀的元素——浏览器根本不认这个写法，写了也白写。
为什么 [data-*] 会失效
这不是浏览器兼容问题，而是 CSS 标准压根没定义这种语法。* 在属性选择器里只允许出现在值匹配位置（比如 [attr*="foo"]），不能塞到属性名里。Chrome 和 Edge 遇到 [data-*] 会静默忽略；Firefox 直接报错：Expected identifier or string。
同样无效的还有：[data]（它只匹配名叫 data 的属性，不是 data-xxx）、[data^="data-"]（^= 是值匹配操作符，不能用在属性名上）。
[data-xxx] 必须全小写 + 连字符
HTML 中写 data-userId 或 data-user-id 看似差不多，但 CSS 选择器只认后者：[data-user-id]。前者在 JS 里用 dataset.userId 也读不到，因为浏览器解析时把所有 data- 属性名转成小写+连字符格式。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：HTML 写
data-api-version="v2"，CSS 写[data-api-version="v2"] - ❌ 错误：HTML 写
data-apiVersion="v2"，CSS 用[data-apiVersion]—— 不生效 - ⚠️ 注意：值里有中文或符号，HTML 可加双引号，CSS 选择器里不用引号，但
attr()里要用：content: attr(data-hint);→ 若值含双引号，得写成content: "他说:\"好\"";
批量匹配多个 data- 属性的实用方案
如果你真要一次性控制一堆不同 data- 属性的元素，只有两个靠谱办法：
- 显式列出常用属性名，用逗号分隔：
[data-id],[data-type],[data-status],[data-role] { opacity: 0.9; }—— 简单直接，但漏掉data-user-id这类动态生成的就不管用了 - 用 JS 扫一遍 DOM，给所有含
data-属性的元素统一加个 class：el.classList.add('has-data-attr')，再写.has-data-attr选择器 —— 兼容性好、可控性强，唯一成本是加几行初始化脚本 - IE11 不支持逗号分隔的多选择器写法，如果还要兼容它，得拆成单独规则，或者干脆只走 JS 方案
真正容易被忽略的是：你改了 dataset.xxx，样式立刻响应，但如果同时开了 will-change: transform，合成层可能卡住重绘，导致视觉延迟——这种时候得关掉 will-change 或换用 transform: translateZ(0)。
