[attr]选择器仅判断属性是否存在，不关心值内容；如button[disabled]匹配和，但不匹配未声明该属性的元素。

怎么用 [attr] 选择器判断属性是否存在

只要 HTML 元素上写了某个属性（不管有没有值、值是什么），[attr] 就能匹配到。比如 <button disabled></button> 和 <button disabled></button> 都会被 button[disabled] 选中。

注意：它不关心属性值内容，只看“有没有这个属性名”。这和 [attr="value"] 或 [attr~="word"] 有本质区别。

• ✅ 匹配：<img src="a.jpg" alt="CSS如何根据属性值是否存在设置样式_利用[attr]选择器匹配css" > → img[src]
• ✅ 匹配：<div data-loaded></div> → div[data-loaded]
• ❌ 不匹配：<span></span>（没写 data-loaded 属性）

[attr] 和 [attr=""] 的区别在哪

这是最容易混淆的点。前者只检测属性是否声明，后者要求属性存在且值为空字符串（或纯空白，但实际浏览器大多只认空引号）。

举个例子：<input required> 会被 input[required] 选中，但不会被 input[required=""] 选中——因为它的 required 没赋值，不是空字符串。

立即学习“前端免费学习笔记（深入）”；

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• [attr]：属性存在即命中（HTML 中写出来就算）
• [attr=""]：必须显式写成 attr=""，比如 <div data-id=""> <li> <code>[attr="value"]：严格等于指定字符串，区分大小写

哪些场景下必须用 [attr] 而不是 class 或 JS 控制

当样式逻辑完全由 HTML 结构决定、且不想引入额外 class 或 JS 时，[attr] 是最轻量的响应方式。典型场景包括：

• 表单控件状态：用 input[disabled] 统一置灰，不用每个都加 .is-disabled
• 语义化标记：如 img[alt] 加边框提示有替代文本，img:not([alt]) 加红色背景告警
• 框架输出控制：某些 SSR 模板会自动加 data-hydrated，可用 [data-hydrated] 触发水合后的样式

优势是零 JS 依赖、无 class 泄漏风险；劣势是无法动态切换——属性得靠 HTML 或服务端/构建时写死。

兼容性和容易踩的坑

[attr] 在所有现代浏览器中都支持，IE7+ 也行，基本不用操心兼容性。但有几个实际开发中常掉进去的坑：

• 属性名大小写敏感：HTML 是大小写不敏感的，但 CSS 选择器是敏感的，[Data-Id] ≠ [data-id]
• 布尔属性别写等号：input[checked="true"] 不会匹配 <input checked>，得用 input[checked]
• 不要试图用它模拟 JS 状态：比如想靠 [data-loading] 控制加载态，但你没法用纯 CSS 把它从无到有“加上去”，只能靠服务端渲染或 JS 操作属性

真正灵活的地方在于静态结构表达意图，而不是替代 JS 的状态管理。一旦开始想“怎么在运行时加这个属性”，就该切回 JS 了。