[attr] 选择器仅匹配属性存在与否，不校验值；失效主因包括属性名拼写错误、大小写不一致、值含空格未加引号、HTML中属性实际不存在或JS动态操作导致属性丢失。
![css如何实现特定属性存在时的样式修正_利用[attr]属性选择器配合](https://img.php.cn/upload/article/000/969/633/177923231818879.jpeg)
直接用 [attr] 选择器就能匹配带该属性的元素，但要注意它只判断“存在”，不校验值是否为空或是否符合预期——这是最常被忽略的前提。
为什么 [attr] 有时不生效
常见错误是把属性名写错（比如写成 [data-role] 却实际是 data-role="nav" 没问题，但若 HTML 中写成了 data_role="nav" 就完全不匹配）；另一个坑是属性值含空格或引号未闭合，导致解析失败，浏览器根本不会把那个属性当有效属性加载。
- HTML 中属性名必须严格大小写一致（
data-id≠data-ID） - 布尔属性如
disabled、checked只要存在就匹配，无需写disabled="true" -
[attr=""]匹配空字符串值，[attr]则连attr=""都匹配
[attr] 和 [attr="value"] 的行为差异
前者只要属性出现在标签上就触发样式，后者要求值完全相等（区分大小写、不可有首尾空格）。例如 input[type="text"] 不会匹配 <input type=" TEXT ">，但 input[type] 会。
- 需要容错时优先用
[attr]，比如统一处理所有带data-tooltip的元素，不管它有没有值 - 精确控制时用
[attr="value"]或[attr^="prefix"]等属性部分匹配伪类 - 注意：CSS 层叠中，
[attr="value"]的优先级略高于[attr]（因多一个比较步骤，b 值+1）
配合伪类或组合选择器提升实用性
单独用 [attr] 很少够用，通常要叠加状态或上下文。比如修正表单中带 required 的输入框边框颜色，就得结合 :invalid 才有意义。
立即学习“前端免费学习笔记（深入）”；
-
input[required]:invalid { border-color: #e53e3e; }—— 只对必填且当前无效的生效 -
button[data-loading]::after { content: "…"; }—— 给正在加载的按钮加提示 - 避免滥用：
div[class]这种写法看似通用，实则干扰可读性，且可能意外覆盖其他 class 规则
真正难的不是写对选择器，而是确认目标属性在 DOM 加载后确实存在——JavaScript 动态插入的元素，如果属性是后续通过 el.setAttribute() 添加的，CSS 会立即响应；但如果用 innerHTML 替换整个节点，属性可能丢失或未重解析。
