[data-xxx]选择器直接可用但需全小写连字符命名，大小写错误、shadow dom隔离、attr()使用限制及will-change干扰是常见失效原因。

直接用 [data-xxx] 就能选中，不需要 JS 注入 class，也不依赖框架；但写错属性名、大小写混用、或在 Shadow DOM 里乱套选择器，就完全不生效。

为什么 [data-status="error"] 有时不匹配？

常见错误是 HTML 里写了 data-Status="error"（带大写），但 CSS 选择器仍得写 [data-status="error"]——HTML 属性名不区分大小写，浏览器解析后统一转为小写，所以 JS 里用 el.dataset.Status 会读不到，必须写成 el.dataset.status。

• 属性名必须全小写 + 连字符（kebab-case），比如 data-user-id，不能写 data-userId 或 dataUserId
• 值带空格或引号时，HTML 中可加双引号，但 CSS 选择器里不用：<div data-hint="用户未登录 → 请先授权"> 对应 <code>[data-hint="用户未登录 → 请先授权"]
• Shadow DOM 内部默认无法从外部样式表命中 [data-xxx]，必须把样式写进 shadowRoot.adoptedStyleSheets，或用 :host([data-open])

[data-xxx] 和 class 控制状态，哪个更合适？

纯状态切换（如按钮 loading / success / error）用 data-status 更干净：避免 class 泛化污染，语义直白，JS 修改也少一行 —— el.dataset.status = 'success' 比 el.classList.replace('loading', 'success') 更不易出错。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 高频切换（如每秒多次）建议仍用 class，因为部分浏览器对 dataset 变更的样式重计算略慢于 classList 切换
• 多个条件组合时，[data-disabled="true"][data-status="error"] 比一堆 BEM class（如 .btn--disabled--error）更易读、易维护
• 服务端渲染或 JS 禁用场景下，data- 属性天然可用，class 往往依赖 JS 初始化

怎么用 attr() 把 data 值显示在页面上？

attr() 只能在 content 里用，且只输出字符串，不能 fallback、不能计算。写错会静默失败，连 warning 都没有。

• 基础用法：[data-hint]::after { content: attr(data-hint); }
• 拼接文字：content: "提示：" attr(data-hint);（注意中间空格是字面量）
• 值含双引号或反斜杠？CSS 里必须用双引号包裹整个 content：content: attr(data-hint); → 若 HTML 是 data-hint='他说："好"'，CSS 必须写 <code>content: "他说：\"好\"";
• 别试 width: attr(data-width px) —— attr() 不支持单位自动补全，也不支持类型转换

真正容易被忽略的是：修改 dataset 后样式立刻生效，但如果你同时用了 will-change: transform，可能触发合成层，反而让属性变更的样式重绘延迟或失效。这种 case 得关掉 will-change 或改用 transform: translateZ(0) 保底。