css 如何只选中包含某属性的元素_使用属性选择器 [attr]_技术教程

[attr] 选择器仅匹配声明了指定属性的HTML元素，无论属性值是否存在或是否为空；它不检查值内容，与[attr=""]（要求值为空字符串）有本质区别，且属性名在HTML中不区分大小写，但建议统一用小写以保证兼容性和可维护性。

直接用 `[attr]` 就能选中带该属性的元素

只要 HTML 元素声明了某个属性（无论值是什么），[attr] 就能匹配它。比如 [title] 会选中所有带 title 属性的元素，不管 title="" 还是 title="详情"。

注意：这个选择器不关心属性值是否为空或是否合法，只看属性是否存在。

→ 匹配（有 title 属性，无值）
→ [alt] 匹配，[src] 也匹配
→ [data-id] 匹配，但 [data] 不匹配（属性名必须完全一致）

`[attr]` 和 `[attr=""]` 的区别很关键

初学者常混淆这两者：[attr] 只检查属性是否存在；[attr=""] 则要求属性存在且值**恰好为空字符串**。

这意味着：[disabled] 能选中和；而 [disabled=""] 只匹配后者 —— 实际开发中几乎不用后者，因为布尔属性（如 disabled、checked）写成 disabled="" 是冗余写法。

推荐用 [disabled] 判断控件是否被禁用
避免写 [hidden=""]，应直接用 [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]


属性选择器看着简单，但容易在大小写、空值判断、语义合理性上翻车。真正要用好，得先想清楚：这个样式逻辑，是不是真的该由“有没有这个属性”来驱动。