要选中属性存在且值明确为空字符串的元素，必须用[attr=""]，它只匹配getattribute('attr')返回""的情况，如，不匹配或disabled简写等。
用 [attr=""] 匹配属性值为空字符串的元素
要选中「属性存在且值明确为空字符串」的元素，必须写成 [attr=""]，不能省略等号和引号。它只匹配那些 DOM 中 getAttribute('attr') 返回 ""（空字符串）的情况，比如 <input title=""> 或 <div data-id=""></div>。
常见误操作是写成 [attr]，那会把 <button disabled></button>、<img title> 全部拉进来——它们的属性值分别是 undefined 和 "" 的语义差异，CSS 是严格区分的。
-
[title=""]→ 只中<img title="">，不中<img title> -
[disabled=""]→ 只中<input disabled>，不中<button disabled></button> - 服务端模板或 JS 动态设置时若用了
el.setAttribute('data-loaded', '')，才适合用这个选择器捕获
[attr] 和 [attr=""] 的行为差异不是“松紧”，而是“存在性 vs 字符串值”
CSS 属性选择器底层调用的是 DOM 的 hasAttribute() 或 getAttribute()，不是字符串模糊比较。这意味着：
-
[disabled]等价于el.hasAttribute('disabled') === true—— 布尔属性简写、显式赋空、赋"false"全部命中 -
[disabled=""]等价于el.getAttribute('disabled') === ''—— 只有显式设为空字符串才成立 - 像
<input required>这种没赋值的，getAttribute('required')返回null，不是""，所以[required=""]完全不匹配
实际项目里几乎不用 [attr=""]，除非你明确在控制空字符串状态
绝大多数 HTML 场景中，属性要么不写（hasAttribute 为 false），要么写成带值或布尔简写（getAttribute 为 null 或字符串）。空字符串通常是 JS 主动注入的标记，比如：
- 加载完成但数据为空：
<div data-status=""></div> - 表单字段清空后保留属性占位：
<input name="search" value="">→ 但注意这是value属性，不是value=""的 DOM 属性值（需看实际渲染） - 避免用它做“视觉为空”的判断 ——
:empty才管结构是否为空，而[attr=""]只管那个 attr 的字符串值是不是""
容易被忽略的关键点：HTML 布尔属性简写 ≠ 空字符串
像 disabled、required、checked 这些布尔属性，在 HTML 中写成 <input required> 时，DOM 中 getAttribute('required') 返回 null，不是 ""。所以 [required=""] 永远不会匹配原生布尔简写写法。只有当你手动执行 el.setAttribute('required', '')，它才会生效。
换句话说：如果你没在 JS 里主动设过空字符串，基本可以确定 [attr=""] 在当前页面里一条都匹配不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
