CSS属性选择器如何匹配指定属性

[attr] 匹配属性存在即可，包括空值如 class=""，易误选空白容器；应按场景慎用，优先采用带值校验的选择器如 [class~="btn"] 或限定标签如 input[required]。

直接用 [attr] 就能匹配所有带该属性的元素，不管值是什么——但这个“简单”背后容易漏掉空值、误伤空白容器，得看场景谨慎用。

为什么 [class] 会选中 class="" 的元素

HTML 允许 class="" 这种写法，它确实声明了 class 属性，只是值为空字符串。[class] 只判断属性是否存在，不校验值内容，所以

也会被选中。实际项目里常因此导致样式意外应用，比如给所有带 class 的元素加边框，结果空白容器也被框住。

1. 更安全的替代：用 [class~="btn"] 或 [class^="btn"]，至少要求值里有内容
2. 若必须用存在性判断，建议限定标签，比如 input[required] 比 [required] 更可控
3. IE7+ 才支持属性选择器，老系统需确认兼容性

[attr] 和 [attr="value"] 混用时的常见错误

很多人写 [data-status] 后又补一条 [data-status="active"]，以为后者是前者的子集，其实两者语义完全不同：前者只管有没有属性，后者要求值一字不差。一旦 HTML 里写了 data-status=active（没引号），而 CSS 写成 [data-status="active"]，就完全不生效——因为没引号时浏览器解析为字面值 active，但 CSS 选择器要求引号内内容严格一致。

1. 等号不能写成冒号：[data-status:"active"] 浏览器直接忽略
2. 值含空格或特殊字符（如 "in progress"）必须加引号，推荐统一用双引号
3. 属性名大小写敏感：[DATA-STATUS="active"] 在标准 HTML 中通常不匹配，因属性会被转为小写

布尔属性如 disabled 怎么写才对

HTML 中的布尔属性（disabled、checked、readonly 等）可以简写为 ，此时属性存在但无显式值。CSS 中只需写 [disabled]，不用写成 [disabled="disabled"]——后者反而可能在某些框架渲染中因值被设为字符串 "true" 而失效。

1. input[disabled] ✅ 匹配 和
2. input[disabled="true"] ❌ 不匹配原生 disabled，除非 JS 显式设了 el.setAttribute('disabled', 'true')
3. 动态设置时注意：JS 用 el.disabled = true 会触发原生行为，而 el.setAttribute('disabled', 'true') 可能导致选择器不命中

真正难处理的是属性值里的不可见字符

CSS 选择器对 BOM、零宽空格、全角空格、多余换行完全无感。比如服务端模板输出 data-id=" 123"（开头是全角空格），[data-id="123"] 就永远不生效。这类问题选择器层面无法解决，必须靠 JS 清洗或服务端规范输出。

1. JS 动态设属性时记得 el.setAttribute('data-id', id.trim())
2. 模板渲染中避免拼接空格，比如不要 class="{{ base }} {{ modifier }}"，而用 class="{{ base + ' ' + modifier }}" 并确保两端无空
3. 遇到奇怪不匹配，先用 DevTools 查看 computed 属性值，复制出来粘贴到编辑器里看是否有隐藏字符