[class~="word"]仅匹配class属性中以空格分隔的完整独立单词，等价于.class选择器语义，不匹配连字符、子串或大小写变体，要求属性值严格按空白符拆分且目标词完全相等。
[class~="word"] 匹配 class 中的独立单词
[class~="word"] 不是字符串包含匹配，而是把 class 属性值当作空格分隔的单词列表来处理，只匹配完整、独立的单词。它和 .word 类选择器语义等价，但更通用——能用于任何支持空格分隔值的属性（比如 lang 或自定义 data-* ）。
常见错误是把它当成模糊搜索：
-
[class~="btn"]能匹配class="btn primary"和class="primary btn large" - 但不会匹配
class="button"、class="btn-primary"或class="rebtn" - 也不能匹配
class="btn123"—— 因为"btn123"是一个词，不等于"btn"
使用场景很明确：当你需要按语义化单词精准控制样式，且 HTML 中 class 值由空格拼接、不含连字符干扰时，它比 [class*="btn"] 安全得多。
为什么不能用 *= 替代 ~= 匹配 class
[class*="btn"] 是子串匹配，整个 class 属性值被当做一个长字符串扫描：
-
class="btn-primary"→ 匹配（含"btn"） -
class="button"→ 匹配（含"btn"） -
class="rebutton"→ 匹配（含"btn"） -
class="primary"→ 不匹配
这种误命中极难调试，尤其在组件库或 CMS 输出中，class 名常带版本号、命名空间或动态后缀。一旦用了 [class*="btn"]，你实际是在赌所有 class 值里“btn”只作为独立词出现——这在真实项目里几乎不成立。
所以：[class~="btn"] 是唯一能安全表达“这个元素声明了 btn 这个角色”的 CSS 原生方式。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
~= 在非 class 属性上的实际用途
[class~="word"] 的设计初衷其实是泛化支持“空格分隔语义值”的任意属性。除了 class，以下用法同样有效且稳定：
-
img[title~="Figure"]匹配title="Figure 3: Chart"，但不匹配title="Figures overview" -
[lang~="en"]理论上可行，但实际应优先用[lang|="en"]（支持en-US） -
[data-role~="editor"]可用于自定义属性，前提是 JS 或模板确保写成data-role="editor toolbar fullscreen"而非data-role="editor-toolbar"
关键点：~= 要求属性值必须用空格分隔，且目标词前后必须是空白或边界；它不解析连字符、下划线或驼峰，也不做大小写转换。
大小写与兼容性要注意什么
[class~="Btn"] 和 [class~="btn"] 完全不等价——CSS 属性选择器默认大小写敏感。HTML 规范推荐 class 名小写，但若后端或框架注入了大写 class（如 class="PrimaryBtn"），[class~="primarybtn"] 就会失效。
没有 i 标志可用于 ~=（仅 *=、^=、$= 支持），所以无法靠加 i 来绕过。唯一可靠做法是统一约定 class 命名规范，并在构建阶段校验。
真正容易被忽略的是：~= 匹配依赖空格的物理存在。如果 JS 动态设置 el.className = "btn primary" 没问题，但写成 el.setAttribute("class", "btn\tpri mary")（含 tab 或多余空格），某些浏览器可能解析异常——不是语法错，而是空格分割逻辑不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
