必须用[attr~="word"]匹配空格分隔的独立单词，如class、rel等多值属性；而[attr="word"]仅作子串搜索，适用于data-等无空格分隔的场景。
什么时候该用 [attr~="word"] 而不是 [attr*="word"]
当你需要匹配“作为独立单词出现”的值时，必须用波浪号 ~="word"；如果只是字符串里含这个子串，才用星号 *="word"。比如 class="btn-primary disabled" 中，disabled 是独立单词，btn-primary 不是——它是一个整体词，中间的连字符 - 不是分隔符。
常见误用：看到 class 里有 error 就写 [class*="error"]，结果把 serious-error-log 也选中了；其实你只想高亮真正带 error 这个语义类名的元素，这时应写 [class~="error"]。
-
[class~="error"]✅ 匹配class="alert error"、class="error show"、class="error" -
[class~="error"]❌ 不匹配class="error-boundary"、class="my-error"（连字符不分词） -
[class*="error"]✅ 匹配以上全部，但泛滥，调试时容易干扰判断
[attr~="val"] 只对空格/换行/制表符分隔的值有效
这个选择器底层逻辑是：把属性值按空白字符切开，再逐个比对是否完全等于 val。所以它只适用于设计上就支持多值的属性，比如 class、rel、data-roles（如果你自己约定用空格分隔）。
不能用于 id、href、src 这类本就不允许多值的属性——虽然语法不报错，但实际等价于 [attr="val"]，因为它们的值不会被切分。
- ✅
[rel~="noopener"]正确：rel 支持多值，rel="noopener noreferrer"会被拆成["noopener", "noreferrer"] - ❌
[href~="login"]无效：href 是单值链接，href="https://site.com/login"不会被切分，匹配失败 - ⚠️
[data-tags~="vue"]仅当data-tags="vue react"才生效；data-tags="vue-js"不会命中
大小写敏感，且引号不可省略
[class~="Error"] 不会匹配 class="error warning"，除非加 i 标志：[class~="error" i]。但注意：这个 i 标志在部分旧浏览器（如 IE）不支持，生产环境慎用。
引号必须存在，尤其当值含点、连字符或空格时。写成 [class~=error] 在多数现代浏览器会解析失败或行为不一致；[class~="error"] 才是安全写法。
- ✅
[data-role~="main-nav"]—— 值含连字符，必须加引号 - ✅
[title~="系统 错误"]—— 中文空格分隔，title="系统 错误"才能命中 - ❌
[class~=btn]—— 缺引号，某些 CSS 解析器直接忽略整条规则
别指望它处理 HTML 自动 normalize 的空格
浏览器会把 class=" btn primary " 自动规范化为 "btn primary"（首尾空格去除、中间多空格压为单空格），所以 [class~="btn"] 仍能匹配。但这不意味着你可以依赖冗余空格来绕过限制——它只解决空格问题，不解决拼写或连字符歧义。
真正麻烦的是语义混杂：比如 class="col col-md-6 col-lg-4"，你想选所有栅格列，写 [class~="col"] 会漏掉 col-md-6；但写 [class*="col"] 又会把 social-link 拉进来。这时候得靠重构命名（如统一前缀 grid-col-）或加 :not() 排除，而不是硬扛选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
