[attr] 会误伤 class="" 元素，因其只判断属性存在性而不校验值内容；更安全的替代方案是使用 [class~="xxx"] 或限定标签如 input[required]。
直接用 [attr] 就能选中所有带该属性的元素，不用管值是什么；真要精确控制，得看属性值结构——是单值、空格分隔词、还是路径/文件名类字符串，再选 [attr="val"]、[attr~="val"]、[attr$="val"] 等对应语法。
为什么 [class] 会误伤 class="" 元素
HTML 中 class="" 是合法写法，它确实声明了 class 属性，只是值为空字符串。而 [class] 只判断“是否存在”，不校验值内容，所以它会把 <div class=""></div> 也拉进来。实际项目里常因此导致样式污染，比如给所有带 class 的元素加边框，结果空白容器也被框住。
- 更安全的替代方案是用
[class~="xxx"]或[class^="xxx"]，它们至少要求值里有内容 - 若必须用存在性判断，建议限定标签：比如
input[required]就比[required]更可控 - 注意 IE7+ 才支持属性选择器，老系统需确认兼容性
[attr="val"] 匹配失败的常见原因
这个看似最简单的精确匹配，反而最容易因细节翻车。浏览器对等号两侧空格、引号、大小写都敏感，稍错就完全不生效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
[type= "email"]中等号后有空格 → 失效（必须写成[type="email"]） - HTML 里写了
data-status=active（没引号），CSS 里却写[data-status=active]→ 失效（必须加引号：[data-status="active"]） -
[lang="en"]不会匹配lang="EN"，哪怕 HTML 规范说lang值不区分大小写 —— CSS 选择器层面严格按字面匹配 - 含空格或特殊字符的值（如
data-id="123 abc"）必须用引号包裹，否则只认到第一个空格前
匹配 class 里的单词要用 [class~="btn"]，不是 [class*="btn"]
[class*="btn"] 是子串匹配，会命中 class="button"、class="sub-btn" 这类非预期元素；而 [class~="btn"] 把 class 值按空格切分成独立词，只匹配完整单词，语义更准确。
- ✅
<div class="btn primary"></div>和<div class="btn"></div>都会被[class~="btn"]选中 - ❌
<div class="btn-large"></div>不会被[class~="btn"]选中（btn-large是一个词，不是btn） - ⚠️
[class~="btn"]对中文无效 —— 它依赖空格分隔，中文词间无空格，无法切分 - 不要在非多值属性上滥用
~，比如[type~="text"]虽语法合法，但实际等价于[type="text"]，纯属画蛇添足
用 [attr$="val"] 匹配结尾时，要注意 class 值是否被其他类打断
比如想匹配所有以 __tienda 结尾的 div，写 div[class$="__tienda"] 看似合理，但只要 HTML 中 class 含多个值（如 class="store__tienda active"），整个属性值就是 "store__tienda active"，结尾是 "active"，不匹配。
- 这种场景下，CSS 层面无解，必须用 JavaScript：
document.querySelectorAll('div').filter(el => el.className.split(' ').some(c => c.endsWith('__tienda'))) -
[href$=".pdf"]这类路径型属性通常不会有多值问题，可放心用 - 如果 BEM 类名是唯一 class（如
class="e-top__tienda"），$=是高效方案；一旦引入状态类（active、disabled），就得切换策略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
