[attr] 选择器仅匹配声明了指定属性的HTML元素，无论属性值是否存在或是否为空；它不检查值内容，与[attr=""]（要求值为空字符串）有本质区别，且属性名在HTML中不区分大小写，但建议统一用小写以保证兼容性和可维护性。
![css 如何只选中包含某属性的元素_使用属性选择器 [attr]](https://img.php.cn/upload/article/000/969/633/176897076399899.jpeg)
直接用 [attr] 就能选中带该属性的元素
只要 HTML 元素声明了某个属性（无论值是什么），[attr] 就能匹配它。比如 [title] 会选中所有带 title 属性的元素，不管 title="" 还是 title="详情"。
注意：这个选择器不关心属性值是否为空或是否合法，只看属性是否存在。
-
<button title></button>→ 匹配（有title属性，无值） -
<img src="a.jpg" alt="">→[alt]匹配，[src]也匹配 -
<div data-id="123"></div>→[data-id]匹配，但[data]不匹配（属性名必须完全一致）
[attr] 和 [attr=""] 的区别很关键
初学者常混淆这两者：[attr] 只检查属性是否存在；[attr=""] 则要求属性存在且值**恰好为空字符串**。
这意味着：[disabled] 能选中 <input disabled> 和 <input disabled="">；而 [disabled=""] 只匹配后者 —— 实际开发中几乎不用后者，因为布尔属性（如 disabled、checked）写成 disabled="" 是冗余写法。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
[disabled]判断控件是否被禁用 - 避免写
[hidden=""]，应直接用[hidden]（<div hidden>就已生效） -
[class]会匹配所有带class属性的元素，包括class=""，但不会匹配没写class的元素
属性名大小写敏感，HTML 和 XHTML 行为不同
在 HTML 文档中，属性名默认不区分大小写；但在 XHTML 或 XML 模式下（比如 application/xhtml+xml），[CLASS] 和 [class] 是两个不同的选择器。
实际项目中绝大多数是 HTML，所以 [Role]、[role]、[ROLE] 都能匹配 role="button"。但为了一致性和可维护性，建议始终用小写属性名和选择器。
- 不要依赖大小写混用，CSS 规范不保证跨解析器行为一致
- 自定义属性（
data-*）同样遵循该规则，[data-user-id]匹配data-user-id="100"，但不匹配data-UserID="100" - 如果用了
contenteditable="true"，[contenteditable]能匹配，但[contentEditable]在标准 HTML 中无效
性能与可读性：别滥用，优先考虑语义类名
[attr] 选择器本身性能尚可，但过度依赖它会让 CSS 更难维护。浏览器需遍历所有元素检查属性是否存在，而类名（.btn）或标签（button）匹配更快、意图更明确。
典型误用场景：用 [href] 给所有带链接的元素加样式，不如统一加 .link 类；用 [data-status] 控制状态样式，不如用 .status--pending 这样的 BEM 命名。
- 适合用
[attr]的情况：处理原生属性逻辑（如[required]、[aria-expanded]）、第三方组件无法加类、快速原型调试 - 避免嵌套使用，比如
form [disabled]比form :is([disabled])更直接（而且后者不被所有浏览器支持） - 若需根据属性值做精细控制（如
type="email"），改用[attr="value"]或[attr~="val"]，而不是仅靠[attr]
