[attr]选择器仅判断属性是否存在，不关心值内容；如button[disabled]匹配<button disabled>和<button disabled="">，但不匹配未声明该属性的元素。
![css如何根据属性值是否存在设置样式_利用[attr]选择器匹配css](https://img.php.cn/upload/article/000/969/633/177355659112721.jpeg)
怎么用 [attr] 选择器判断属性是否存在
只要 HTML 元素上写了某个属性（不管有没有值、值是什么），[attr] 就能匹配到。比如 <button disabled></button> 和 <button disabled=""></button> 都会被 button[disabled] 选中。
注意：它不关心属性值内容，只看“有没有这个属性名”。这和 [attr="value"] 或 [attr~="word"] 有本质区别。
- ✅ 匹配：
<img src="a.jpg">→img[src] - ✅ 匹配：
<div data-loaded></div>→div[data-loaded] - ❌ 不匹配：
<span></span>（没写data-loaded属性）
[attr] 和 [attr=""] 的区别在哪
这是最容易混淆的点。前者只检测属性是否声明，后者要求属性存在且值为空字符串（或纯空白，但实际浏览器大多只认空引号）。
举个例子：<input required> 会被 input[required] 选中，但不会被 input[required=""] 选中——因为它的 required 没赋值，不是空字符串。
立即学习“前端免费学习笔记（深入）”；
-
[attr]：属性存在即命中（HTML 中写出来就算） -
[attr=""]：必须显式写成attr=""，比如<div data-id=""> -
[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 了。
