[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 空白符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
