[class~="btn"]不匹配class="btn-primary"，因为~=选择器仅匹配空格分隔的独立单词，而“btn-primary”是单个连字符连接的字符串，无法按空白符拆分为["btn", "primary"]，故不命中。
为什么[class~="btn"]不匹配class="btn-primary"
[attr~="value"] 只对空格分隔的独立单词生效，它会把属性值按空白符（空格、换行、制表符）切开，再逐个比对是否完全等于 value。连字符 - 不是分隔符，所以 class="btn-primary" 是一个整体字符串，无法被拆成 ["btn", "primary"]，自然不匹配 [class~="btn"]。
常见误判场景包括：
- 把
btn-group当作两个词，试图用[class~="group"]匹配 —— 实际上整个是单个 token - 在中文属性值里写
title="系统错误"却用[title~="错误"]，结果失败，因为中间没空格，不是独立词 - 对
data-tags="vue-js react"写[data-tags~="vue"]，但"vue-js"≠"vue"，不命中
什么时候该用[attr~="value"]，而不是[attr*="value"]或[attr^="value"]
只有当你明确要匹配“空格分隔的多值属性中某个完整单词”时，才用 ~="value"。典型适用场景仅限：class、rel、lang 等规范允许空格分隔的原生属性。
其他情况优先换更精确的写法：
- 想匹配前缀（如
data-component="modal-header"）→ 用[data-component^="modal-"] - 想匹配子串（如
href="https://api.example.com/v2/user"中找api）→ 用[href*="api"]，但注意它也会误中captcha - 想匹配语言子标签（如
lang="zh-CN"中的zh）→ 用[lang|="zh"]，不是~="zh"
[attr~="value"] 在自定义 data- 属性上基本无效
除非你主动用空格分隔多个值，否则 data- 属性值默认是单个字符串，~="value" 就失去意义。比如：
-
data-role="header footer"→[data-role~="footer"]✅ 有效 -
data-role="header-footer"→[data-role~="footer"]❌ 不匹配 -
data-tags="error warning"→[data-tags~="warning"]✅ -
data-tags="error-warning"→[data-tags~="warning"]❌
多数项目里，data- 值由 JS 动态拼接或服务端直出，很少刻意加空格；此时硬套 ~="value" 很容易查无此元素。
调试时怎么快速验证是否命中 [attr~="value"]
打开 DevTools，在 Elements 面板里右键目标元素 → “Break on” → “Attribute modifications”，然后手动修改 class 或 rel 值（例如从 class="btn" 改成 class="btn primary"），观察样式是否实时切换。更直接的方法是临时加一条测试规则：
[class~="primary"] { outline: 2px solid red !important; }
如果没反应，说明要么属性名拼错，要么值没空格分隔，或者浏览器根本没解析出那个单词 —— 这种细节在 SSR 或框架注入属性时特别容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
