[attr] 匹配属性存在即可，包括空值如 class=""，易误选空白容器；应按场景慎用，优先采用带值校验的选择器如 [class~="btn"] 或限定标签如 input[required]。
直接用 [attr] 就能匹配所有带该属性的元素，不管值是什么——但这个“简单”背后容易漏掉空值、误伤空白容器，得看场景谨慎用。
为什么 [class] 会选中 class="" 的元素
HTML 允许 class="" 这种写法，它确实声明了 class 属性，只是值为空字符串。[class] 只判断属性是否存在，不校验值内容，所以 <div class=""></div> 也会被选中。实际项目里常因此导致样式意外应用，比如给所有带 class 的元素加边框，结果空白容器也被框住。
- 更安全的替代：用
[class~="btn"]或[class^="btn"]，至少要求值里有内容 - 若必须用存在性判断，建议限定标签，比如
input[required]比[required]更可控 - IE7+ 才支持属性选择器，老系统需确认兼容性
[attr] 和 [attr="value"] 混用时的常见错误
很多人写 [data-status] 后又补一条 [data-status="active"]，以为后者是前者的子集，其实两者语义完全不同：前者只管有没有属性，后者要求值一字不差。一旦 HTML 里写了 data-status=active（没引号），而 CSS 写成 [data-status="active"]，就完全不生效——因为没引号时浏览器解析为字面值 active，但 CSS 选择器要求引号内内容严格一致。
- 等号不能写成冒号：
[data-status:"active"]浏览器直接忽略 - 值含空格或特殊字符（如
"in progress"）必须加引号，推荐统一用双引号 - 属性名大小写敏感：
[DATA-STATUS="active"]在标准 HTML 中通常不匹配，因属性会被转为小写
布尔属性如 disabled 怎么写才对
HTML 中的布尔属性（disabled、checked、readonly 等）可以简写为 <button disabled></button>，此时属性存在但无显式值。CSS 中只需写 [disabled]，不用写成 [disabled="disabled"]——后者反而可能在某些框架渲染中因值被设为字符串 "true" 而失效。
-
input[disabled]✅ 匹配<input disabled>和<input disabled> -
input[disabled="true"]❌ 不匹配原生disabled，除非 JS 显式设了el.setAttribute('disabled', 'true') - 动态设置时注意：JS 用
el.disabled = true会触发原生行为，而el.setAttribute('disabled', 'true')可能导致选择器不命中
真正难处理的是属性值里的不可见字符
CSS 选择器对 BOM、零宽空格、全角空格、多余换行完全无感。比如服务端模板输出 data-id=" 123"（开头是全角空格），[data-id="123"] 就永远不生效。这类问题选择器层面无法解决，必须靠 JS 清洗或服务端规范输出。
- JS 动态设属性时记得
el.setAttribute('data-id', id.trim()) - 模板渲染中避免拼接空格，比如不要
class="{{ base }} {{ modifier }}"，而用class="{{ base + ' ' + modifier }}"并确保两端无空 - 遇到奇怪不匹配，先用 DevTools 查看 computed 属性值，复制出来粘贴到编辑器里看是否有隐藏字符
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
