[class~="val"]是精确单词匹配，只匹配class属性中以空格分隔且完全相等的独立词，不支持子串、前缀、后缀或大小写忽略。
![为什么css属性选择器[class~=val]无法模糊匹配？](https://img.php.cn/upload/article/000/969/633/179256118966339.jpeg?x-oss-process=image/resize,p_40)
[class~="val"] 不是模糊匹配，它是精确单词匹配——它只认 class 属性中以空格分隔的、完全相等的独立词，不支持子串、前缀、后缀或大小写忽略。
为什么 [class~="btn"] 匹配不了 class="btn-primary"
因为 class~="btn" 会把整个 class 属性值按空白符切分成单词列表，再逐个比对是否「完全等于」btn。而 "btn-primary" 是一个单词（连字符不构成分隔），和 "btn" 字符串不等，直接跳过。
-
class="btn primary"→ 匹配（"btn"是独立词） -
class="primary btn large"→ 匹配（顺序无关） -
class="btn-primary"→ 不匹配（不是独立词） -
class="btn2"→ 不匹配（"btn2" ≠ "btn"） -
class="Btn"→ 不匹配（大小写敏感）
常见误用场景：把它当“含 btn 就行”的通配符
很多人写 [class~="btn"] 是想选所有带按钮语义的元素，结果漏掉 btn-lg、submit-btn、is-btn 等变体。这不是选择器坏了，而是用错了语义：
-
~=的设计目标是匹配多值属性中的「语言标签」或「角色关键词」，比如lang~="zh"或role~="button" - 它比
.btn类选择器还严格，因为类选择器可被预处理器扩展，而~=只做字面等值判断 - 若真要覆盖各种命名风格，应统一使用语义化 class（如
btn）并配合 BEM 或原子类，而非依赖属性选择器“猜”意图
替代方案：什么时候该用 *=、^= 或 JS 判断
如果必须基于 class 字符串内容动态控制样式或行为，优先级建议如下：
- ✅ 首选
.btn类选择器 —— 明确、高效、可维护 - ⚠️ 次选
[class*="btn"]—— 仅限 data-* 属性或你完全掌控 class 命名（如data-role="modal-confirm"），避免在class上用，易误命中attention、obtain等 - ⚠️
[class^="btn-"]或[class$="-btn"]更脆弱 —— class 值末尾常被 JS 动态追加（如"btn-primary is-disabled"），导致$=失效 - ? 真正需要模糊逻辑时，交给 JS：
element.classList.contains("btn")或正则/^btn|btn-|-btn$/.test(element.className)，CSS 层保持声明式
关键点在于：CSS 属性选择器没有“模糊”概念，只有「字符串位置规则」和「单词边界规则」。把 ~= 当模糊用，本质是混淆了语义匹配与文本扫描的边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
