属性值完全匹配用[attr="value"]，要求一字不差、大小写与空格均敏感；[attr~="val"]用于空格分隔的单词匹配（如class）；[attr*="sub"]和[attr^="pre"]为子串与前缀模糊匹配；引号必需，标准模式下大小写敏感。
属性值完全匹配用 [attr="value"]
这是最直接的“精确等于”写法，浏览器只选中 attr 属性值**一字不差等于** "value" 的元素。注意：大小写敏感、空格敏感、不可有前后空白。
常见错误是把带空格的 class 当成整体匹配：.nav-item 元素写成 class="nav-item active"，若用 [class="nav-item"] 就完全不生效——因为实际值是 "nav-item active"，不是 "nav-item"。
适用场景：自定义属性（如 data-status）、布尔型属性（如 disabled 用 [disabled="disabled"]）或确保值绝对干净的场景。
[attr~="val"] 匹配空格分隔的单词
当属性值是空格分隔的多个词（典型如 class），用波浪号 ~ 表示“包含某个单词”。它会把值按空格切开，再逐个比对。
-
[class~="btn"]能命中class="btn primary"、class="btn"、class="large btn small" - 但不会匹配
class="btn-primary"（连字符不算分隔）或class="button"（拼写不同） - 注意：HTML 规范要求
class值必须以空格分隔，所以这个选择器对class是安全的；但对自定义属性，得确保你控制了它的格式
[attr*="sub"] 和 [attr^="pre"] 是子串/前缀匹配
这两个不是“精确条件”，但常被误当作精确用。它们属于模糊匹配：
-
[href*="github"]匹配所有href中含"github"的链接，包括https://github.com和https://my-github-backup.net -
[data-id^="user-"]匹配data-id="user-123"，但也会匹配data-id="user-123-admin" - 它们不区分单词边界，也不做规范化处理（比如忽略大小写需额外加
i标志，但仅部分浏览器支持[attr^="val" i]）
容易被忽略的细节：引号、大小写与 HTML 模式
属性选择器中的值必须加引号（单或双均可），否则遇到特殊字符（如 .、-、空格）会解析失败。例如 [data-role=main-nav] 在某些解析器下可能报错，而 [data-role="main-nav"] 总是安全的。
HTML 文档在 quirks 模式下，属性值比较可能不区分大小写；但在标准模式（）下，<code>[lang="EN"] 不会匹配 lang="en"。如果需要大小写无关，目前没原生 CSS 方案，得靠 JS 或预处理时统一标准化值。
真正“包含特定值”的精确需求，往往要结合语义和属性设计：优先用 data- 属性存结构化值，避免把多值塞进一个属性里硬匹配。
