要让CSS选择器准确匹配data-*自定义属性，这些属性必须真实写在HTML中，且拼写、大小写、引号都要完全一致；如果是动态添加，还要确保DOM已经完成渲染；另外，CSS属性选择器不支持data-*通配写法，attr()也不能直接用于样式计算或样式切换。

data-*属性必须真实存在HTML中才能被选中

浏览器不会自动“猜测”你想匹配的data属性。比如[data-theme]这个CSS选择器，只会匹配 DOM 中确实存在data-theme属性的元素，即使该属性值为空也能匹配；但如果HTML里根本没有写这个属性，对应的CSS样式就不会生效。最常见的问题通常有两类：一类是 JS 虽然动态添加了属性，但执行时机过早，DOM 还没完成渲染；另一类是属性名拼写错误，例如把data-theme误写成少了一个e的data-them。

实操建议：

• 使用浏览器开发者工具中的 Elements 面板，直接检查目标元素是否真的带有对应的data-属性（重点核对大小写和连字符）
• 避免在JS里执行element.dataset.theme = "dark"后立刻怀疑CSS失效——它会映射为对应的data-theme属性，而CSS选择器仍然必须按原始属性名书写，如[data-theme="dark"]
• 在服务端渲染或静态HTML页面中，尽量确保关键属性已经直接写在标签中，而不是完全依赖客户端再补充

[data-*="value"]必须严格匹配字符串

在使用CSS属性选择器匹配data-*属性值时，字符串必须严格一致。属性值中的大小写、空格、引号以及特殊字符都会影响匹配结果。比如[data-status="active"]不会匹配data-status="Active"，也不会稳定匹配data-status=active这种未加引号的写法（在部分旧浏览器中可能解析失败）。

实操建议：

• 凡是包含空格、斜杠、中文或大写字母的属性值，HTML中都应使用双引号或单引号包裹，例如：

• CSS里对应也要写成[data-id="user 123"]，不要省略引号，否则容易导致选择器匹配失败
• 如果需要忽略大小写，可以加上i标志：[data-theme="DARK" i]可以匹配data-theme="dark"和data-theme="DARK"
• 如果属性值是由空格分隔的多个关键词组成，例如data-role="admin editor"，应使用[data-role~="editor"]进行匹配，而不是直接使用=

data-*选择器优先级和组合写法

[data-theme="dark"]这类属性选择器的优先级是10，和类选择器相同，高于元素选择器，但低于ID选择器。它不仅可以单独使用，也可以和其他选择器灵活组合。

实操建议：

• 如果只想让 dark 主题下的按钮生效，应写成button[data-theme="dark"]，不要写成[data-theme="dark"] button（后者选择的是带该属性元素内部的按钮）
• 如果需要同时满足多个data-条件，应连续书写：[data-theme="dark"][data-compact="true"]，中间不能有空格
• 如果想匹配所有带有data-前缀的属性，不管具体名称是什么，这种写法在CSS中并不支持——[data-*]属于无效思路，只能逐个声明，或者改用JS逻辑判断
• 与伪类组合使用完全没问题，例如：input[data-required="true"]:invalid就是合法且常见的写法

attr()函数不能替代选择器做样式切换

有些开发者会尝试写color: attr(data-color);，希望让CSS样式随着data属性变化而自动切换，但这种方式通常行不通。原因是attr()目前主要在content属性中被广泛支持，在其他样式属性中的兼容性和实际效果都很有限，要么无效，要么不会按预期触发重绘。

实操建议：

• 真正需要根据data-*属性动态切换颜色或主题时，应依赖预先定义好的规则，例如：[data-theme="dark"] { --bg: #1a1a1a; --text: #fff; }，再通过background: var(--bg)来调用变量
• 不要过度依赖JS实时修改style="--color: red"再让CSS去读取，这种方案不仅绕远，而且可维护性也更差
• data-*属性本质上更适合作为“状态标记”使用，而不是充当“值传输容器”。它最适合的场景，是触发整套预定义样式规则，而不是单独传递某一个样式值