data属性选择器如[data-error]可匹配布尔属性或空字符串，但JS设dataset.error=""可能移除属性致失效；需注意大小写敏感、特殊字符加引号、content不叠加、:not()不可嵌套及强制回流防渲染延迟。
data属性选择器的基本写法和常见失效原因
直接用 [data-error] 这类属性选择器是可行的，但很多人写了样式却没效果，根本原因不是语法错，而是属性值为空或未渲染到 DOM。比如 HTML 中写 <div data-error></div>，这个 data-error 是布尔属性，没有值，CSS 里 [data-error] 能匹配；但若写成 <div data-error=""></div>，空字符串也算“存在”，也能匹配；可一旦 JS 动态设为 el.dataset.error = ""，某些浏览器会把该属性彻底移除，导致选择器失效。
容易踩的坑：
-
[data-error=""]只匹配显式写data-error=""的元素，不匹配缺失该属性或dataset.error = undefined的情况 - 属性名大小写敏感：HTML 中写
data-Error，CSS 里必须用[data-Error]，不能写成[data-error] - 属性值含空格或特殊字符时，必须用引号包裹：
[data-tip="need input"]，否则解析中断
多个 data 属性共存时 content 冲突怎么解
当一个元素同时有 data-error 和 data-error-1，又都用 ::after { content: attr(data-error) } 和 ::after { content: attr(data-error-1) }，后声明的规则会覆盖前者的 content 值——伪元素只有一个，content 不支持叠加。
正确做法是只留一个主 data 属性，由 JS 控制其值：
立即学习“前端免费学习笔记（深入）”；
- 统一用
data-error-active存当前要显示的消息文本 - JS 更新时，先清空其他 error 属性，再赋值：
el.dataset.errorActive = "用户名已存在" - CSS 只写一条：
.form-field[data-error-active]::after { content: attr(data-error-active); } - 需要隐藏时，删掉该属性：
delete el.dataset.errorActive，选择器自然不生效
结合 :not() 实现状态切换样式
光靠 [data-loading] 显示 loading 状态不够灵活，常需“有 loading 时禁用交互、隐藏内容”，这时 :not([data-loading]) 就很实用。
例如控制按钮状态：
button[data-loading] { opacity: 0.6; pointer-events: none; }button:not([data-loading]) .label { display: inline; }button[data-loading] .spinner { display: inline-block; }
注意：:not() 里只能放简单选择器，不能嵌套，比如 :not([data-error][data-touched]) 是非法的；真要组合多条件，得换思路——用 JS 同时设置 data-error-touched 这类复合属性。
性能与可维护性提醒
大量使用 [data-*] 选择器本身开销极小，但滥用会导致 CSS 规则膨胀、逻辑分散。比如为每个错误类型写一条 [data-error-type="email"]、[data-error-type="phone"]，不如统一用 data-error + JS 分类处理。
真正容易被忽略的是更新时机：DOM 属性变了，CSS 立刻响应；但 JS 改了 dataset.xxx，如果没触发重排或重绘（比如只改属性没改 class 或内容），某些旧版 Safari 可能延迟一帧才刷新伪元素。稳妥做法是在设完 dataset 后加一句 el.offsetHeight 强制触发回流（仅在必要场景下）。
