CSS无法匹配data-前缀属性，必须显式写出完整属性名如[data-id]；伪通配写法[attr^="data-"]或1均无效；批量控制应统一加class，再用类选择器，或由JS动态添加class并监听变化。data- ↩
如何用 CSS 选择器匹配带 data- 前缀的属性
CSS 本身不支持“通配前缀”的语法（比如 [attr^="data-"] 是无效的），data- 属性必须显式写出完整名称才能被选择。浏览器只认具体属性名，不解析前缀语义。
常见误写：[attr^="data-"] 或 [^data-] —— 这两种写法在任何浏览器中都不生效，前者是属性值开头匹配，后者根本不是合法 CSS 语法。
- 正确做法是：为每个要用的
data-属性单独写选择器，例如[data-id]、[data-role]、[data-track] - 若需批量控制，建议统一加 class，比如
class="js-track"，再用.js-track选择，比依赖大量data-属性更可靠 - JavaScript 中可通过
element.hasAttribute('data-xxx')或element.dataset.xxx动态判断，CSS 不具备该能力
为什么 [attr|="value"] 不能用于属性前缀匹配
[attr|="value"] 是 CSS2 的“连字符分隔匹配”，仅适用于属性值（不是属性名），且要求值等于 "value" 或以 "value-" 开头（注意是值，不是名）。它和属性名前缀完全无关。
- 有效用例：
img[lang|="zh"]可匹配lang="zh"或lang="zh-CN" - 无效用例：
[data|="user"]——data不是属性名，|=不作用于属性名 - 属性名没有“语言式连字符语义”，CSS 标准从未定义过属性名前缀匹配机制
用属性选择器模拟“前缀行为”的实际限制
如果硬要靠 CSS 覆盖多个 data- 属性，只能靠重复书写或预处理器生成，但会带来维护和性能隐忧。
立即学习“前端免费学习笔记（深入）”；
- 可写成：
[data-tip], [data-tooltip], [data-hint] { ... }，但这是人工枚举，非自动匹配 - Sass/Less 中可用循环生成，如
@each $key in tip, tooltip, hint { [data-#{$key}] { ... } }，但最终编译出的仍是静态规则 - 过多属性选择器会拖慢 CSS 解析（尤其在低配设备上），Chrome DevTools 的 “Rendering” 面板里能观察到 style recalc 时间上升
- 无法响应
data-属性动态增删 —— 新增data-new不会自动套用已有样式
真正需要前缀匹配时，该转向 JS + class 的组合
当业务逻辑依赖“某类自定义属性存在”来触发样式（比如所有带 data-animate 的元素入场动画），纯 CSS 无解，必须由 JS 注入 class。
- 示例脚本：
document.querySelectorAll('[data-animate]').forEach(el => el.classList.add('animate-ready')) - 对应 CSS：
.animate-ready { animation: fade-in 0.3s; } - 优势：可配合
MutationObserver监听后续新增的data-animate元素，CSS 做不到这点 - 注意避免 class 泄漏：JS 添加的 class 最好带命名空间前缀（如
js-animate），防止与业务 class 冲突
属性前缀本质是 HTML 的语义约定，CSS 只管呈现，不参与语义解析 —— 这个边界一旦混淆，就容易卡在“以为能写却无效”的调试循环里。
