必须用[attr~="value"]匹配空格分隔的单词，它按ascii空格切分token后全等比对；[attr="value"]是全值匹配，[attr*="value"]和[attr|="value"]不适用于空格分隔场景。
匹配空格分隔的单词必须用 [attr~="value"]
只有 ~= 操作符是专为「空格分隔的独立单词」设计的。它会把属性值按 ASCII 空格（U+0020）切分成 token，再逐个做全等比对——不是子串搜索，也不认连字符或中文顿号。
常见误判：
-
[class~="btn-primary"]不会匹配class="btn-primary"（中间没空格，整个是单个 token） -
[data-tags~="vue"]对data-tags="vue-js react"无效（vue-js≠vue） -
[title~="错误"]只匹配title="系统 错误"，不匹配title="系统错误"（无空格分隔）
[attr="value"] 是全值匹配，不是单词匹配
写 [class="btn primary"] 只会选中 class 属性**一字不差等于** "btn primary" 的元素。哪怕多一个空格、少一个空格、顺序调换，都不命中。
这在实际开发中极少适用，因为 class 值常动态拼接、顺序不可控。典型可用场景反而是自定义属性，比如：
-
[data-status="draft"]—— 状态值由后端严格输出，无额外空格 -
[data-role="modal dialog"]—— 前端统一写死，且保证值完全一致
注意：data-role="modal dialog" 必须加引号，否则 [data-role=modal dialog] 会被解析成两个选择器，直接失效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
别拿 *= 或 |= 替代 ~=
*= 是纯子串匹配，边界失控；|= 只适用于连字符分隔（如 lang），两者对空格分隔场景都错位。
-
[class*="btn"]会误中class="sub-btn"、class="button"、class="btn-large" -
[class|="btn"]完全不匹配class="btn primary"，因为|=要求值等于"btn"或以"btn-"开头 -
[data-roles*="admin"]虽能“凑合用”，但也会匹配到"administer"或"re-admin"，语义不可靠
真正难的是不可见字符，CSS 无解
如果属性值里混了零宽空格（U+200B）、BOM（U+FEFF）或全角空格（U+3000），~= 和 = 都会失败——CSS 解析器不清洗这些字符，也不报错，只是默默不匹配。
这时必须靠 JavaScript 预处理：
- 用
.trim()去首尾空白 - 用正则
/[\u200B-\u200F\uFEFF]/g清洗零宽字符 - 把全角空格替换成 ASCII 空格后再设回属性
这类问题不会出现在 HTML 源码里，而常来自 CMS 输出、用户粘贴、JSON 接口返回——最容易被忽略，也最难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
