CSS不支持[data-]通配符选择器，因标准中仅用于属性值匹配；可靠方式为显式列出data属性名或用JS动态添加class。
用 [data-*] 通配符选择器匹配所有带 data 属性的元素
浏览器原生不支持 [data-*] 这种写法——它会直接报错或完全不生效。CSS 标准里没有“属性名通配符”语法，* 在属性选择器中只用于属性值匹配（比如 [attr*="foo"]），不能放在属性名位置。
真正能批量选中 data 属性元素的只有两种可靠方式
必须明确写出要匹配的 data 属性名，或者借助 JS 辅助。纯 CSS 没有“任意 data 属性”这种万能选择器。
-
显式列出常用 data 属性：适用于你知道项目里主要用哪些 data 属性（如
data-id、data-type、data-status），用逗号分隔：[data-id],[data-type],[data-status] { opacity: 0.9; } -
用 JS 动态加 class：在初始化时给所有含
data-*的元素打上统一 class（如has-data-attr），再用.has-data-attr选中——这是最可控、无兼容性问题的做法
为什么不用 [data] 或 [data^="data-"]
这两个写法常见但都无效：
-
[data]试图匹配名为data的属性（不是data-xxx），和 data 属性无关 -
[data^="data-"]语法错误：属性名不能用^=，这个是值匹配操作符，只能用于属性值，不能用于属性名本身 - 部分人误试
[data-*]，Chrome/Edge 会静默忽略，Firefox 直接抛 CSS 解析错误：Expected identifier or string
如果真要靠 CSS “近似覆盖”，得接受局限性
可以退一步，用属性存在选择器 + 常见前缀组合，但注定漏匹配：
立即学习“前端免费学习笔记（深入）”；
- 只匹配以
data-开头的**已知固定名**：[data-id],[data-name],[data-value],[data-role] { /* ... */ } - 无法覆盖
data-user-id、data-api-version这类动态生成的长命名 - IE11 及更早版本不支持多个属性选择器逗号分隔的复杂写法，需单独拆行或降级处理
真正想“一劳永逸”选中所有 data 属性元素，绕不开 JS 扫描 element.attributes 并分类标记——CSS 本身的能力边界就在这里。
