[data-*]不是合法CSS语法，浏览器直接忽略；必须显式写出完整data-属性名（如[data-id]），或用JS统一添加class再选择。
根本原因不是选择器“失效”，而是你写的 [data-*] 根本不是合法 CSS 语法——浏览器直接忽略它，连报错都懒得给。
为什么 [data-*] 写法完全不生效
CSS 标准里没有属性名通配机制。* 只允许出现在值匹配位置（比如 [attr*="foo"]），不能塞进属性名里。所有主流浏览器遇到 [data-*] 都会静默丢弃整条规则。
- Chrome / Edge：不报错，但 DevTools 的 Styles 面板里根本看不到这条规则
- Firefox：控制台明确报错
Expected identifier or string - 别试
[data]、[data^="data-"]或[^data-]——全都不合法
[data-xxx] 匹配失败的常见硬伤
就算写了正确语法，90% 的失败来自 DOM 层面的“不存在”或“不一致”。用开发者工具右键目标元素 →「Edit as HTML」，确认以下几点是否真实存在：
- HTML 中该
data-xxx属性是否真的被渲染出来？JS 或框架（Vue/React）在值为null、undefined或空字符串时，通常跳过渲染，DOM 里压根没这行 - 属性名是否全小写 + 短横线？
data-userId会被转成data-userid，CSS 必须写[data-userid]才能匹配 - 属性值含空格或特殊字符（如
data-status="in progress"）？CSS 里必须加引号：[data-status="in progress"]，不加就解析失败 - 大小写是否一致？
[data-role="Header"]不匹配data-role="header"，除非加i修饰符：[data-role="header" i]
Shadow DOM 和 SSR 场景下的隐性断层
样式无法穿透 Shadow DOM 边界，服务端渲染首屏缺失属性，都是“看起来写了却没效果”的高发区：
立即学习“前端免费学习笔记（深入）”；
- Shadow DOM 内部的元素，外部样式表里的
[data-xxx]默认不生效；必须把样式注入 shadowRoot，或改用:host([data-open])这类宿主选择器 - SSR 场景下，服务端变量未定义导致首屏无
data-xxx，客户端 hydration 后才补上——但 CSS 计算早已完成，视觉上就是“延迟生效”甚至“不生效” - 用了
will-change: transform？它可能触发合成层，反而卡住属性变更后的样式重绘；临时关掉或换transform: translateZ(0)测试
真要批量控制带 data- 的元素，只能靠这两招
别再幻想靠 CSS 自动识别“所有 data- 属性”，浏览器不支持。务实方案只有两个：
- 显式枚举常用属性：
[data-id], [data-type], [data-status], [data-role]—— 简单直接，但漏掉动态生成的（如data-user-id）就不管用 - JS 扫描并打标：
document.querySelectorAll('[data-]')不行（语法错误），得用el.hasAttribute('data-xxx')或遍历el.attributes，统一加 class 如has-data-attr，再写.has-data-attr选择器
真正容易被忽略的是：data- 属性本身是静态快照，CSS 无法监听它的动态增删；一旦新增 data-new，已有样式不会自动覆盖——这决定了纯 CSS 方案的天然边界。
