[class~="word"]是唯一能精确匹配class中独立单词的原生方式，它将class值按空格分词后全等匹配，不支持子串、连字符或大小写变体，语义等价于.class但更通用，适用于class、lang、data-role等空格分隔属性。

[class~="word"] 是唯一能精确匹配 class 属性中“独立单词”的原生方式，不是字符串搜索，而是语义化单词匹配。

为什么 [class~="btn"] 不等于 [class*="btn"]

前者只匹配 class="btn primary" 或 class="large btn disabled" 这类空格分隔的完整单词；后者会误命中 class="btn-primary"、class="rebutton"、class="btn123"——只要字符串里含 "btn" 就算数。真实项目中 class 常带命名空间或动态后缀（如 btn-v2、primary-btn-compact），用 *= 极易引发样式泄漏。

[class~="x"] 的实际匹配规则

它把 class 属性值当作空格分隔的单词列表处理，目标词必须：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 前后是空白或属性边界（不能是连字符、下划线、驼峰的一部分）
• 大小写完全一致（[class~="Btn"] 不匹配 class="btn"）
• 不能是子串（[class~="nav"] 不匹配 class="navigation"）
• 等价于 .x 类选择器的语义，但更通用——可用于 lang、data-role 等同样用空格分隔的属性

哪些场景适合用 [class~="x"]？

当你需要按语义角色而非字符串结构做样式控制时：

立即学习“前端免费学习笔记（深入）”；

• 组件库中统一处理具有 editor 角色的元素：[data-role~="editor"] { … }
• 多语言站点中匹配主语言变体：[lang~="zh"]（但更推荐 [lang|="zh"] 支持 zh-CN）
• 避免与 BEM 或 CSS-in-JS 生成的复合 class 冲突（如 Button--primary 不会被 [class~="Button"] 匹配）
• HTML 模板由 CMS 输出、无法控制 class 拼接方式时，它是比 .x 更显式、比 *= 更安全的折中方案

真正容易被忽略的是：这个选择器对空格敏感且零容错——class="btn primary"（两个空格）仍可匹配，但 class="btn,primary" 或 class="btn_primary" 完全无效。它不解析任何分隔符，只认 Unicode 空白符。