[class~="btn"]能匹配class="btn primary"是因为~=只匹配空格分隔的独立单词，将属性值按空白符分割后逐一全等比较；而class="btn-primary"是单个词，无法分割，故[class~="primary"]不匹配。
为什么[class~="btn"]能匹配class="btn primary"，但[class~="primary"]不能匹配class="btn-primary"
因为[attr~="value"]只对**空格分隔的独立单词**生效，它会把属性值按空白符（空格、换行、制表符）切开，再逐个比对是否完全等于value。所以class="btn primary"会被拆成["btn", "primary"]，两个都命中；而class="btn-primary"整个字符串是一个词，拆不开，自然不匹配primary。
常见误判场景：
- 把连字符
-当成单词分隔符——它不是，class~="btn"不会匹配class="btn-group" - 在
data-*自定义属性上滥用——比如data-tags="vue-js react"，写[data-tags~="vue-js"]是有效的，但[data-tags~="vue"]不行，因为"vue-js"不是"vue" - 对中文属性值误用——
[title~="错误"]只能匹配title="系统 错误"，不匹配title="系统错误"（中间没空格）
[rel~="noreferrer"]和[href*="noreferrer"]的区别在哪
[rel~="noreferrer"]是语义正确的写法，因为rel属性规范允许空格分隔多个值（如rel="noopener noreferrer"），~="noreferrer"确保只匹配作为独立关系关键词出现的情况。
而[href*="noreferrer"]是错误思路：它试图在href链接地址里找子串"noreferrer"，但href值根本不会包含这个词——它是rel的职责。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 混淆属性用途：
rel、class、aria-role等才是设计为多值空格分隔的，type、id、href不是，对它们用~="xxx"虽语法合法，但实际等价于="xxx"，且易误导自己 - 忽略大小写敏感性：
[rel~="NOOPENER"]不会匹配rel="noopener"，除非加i标志：[rel~="noopener" i]
如何安全地匹配带空格的自定义属性值，比如data-roles="admin editor"
直接用[data-roles~="admin"]就行——只要data-roles值中存在以空格包围或边界对齐的admin，就能命中。
但要注意HTML解析细节：
- HTML中
data-roles="admin editor"和data-roles=" admin editor "（首尾空格）在DOM中都会被规范化为"admin editor"，所以~="admin"依然有效 - 如果值是
data-roles="admin,editor"（逗号分隔），~="admin"就失效了，得改用*="admin"，但这会误匹配"administrator" - 服务端渲染或JS动态写入时，若拼接出
data-roles="admin editor"（双空格），浏览器仍会归一化为单空格，不影响~="editor"
真正危险的是混用引号风格：data-roles=admin editor（无引号）在HTML中合法，但CSS里必须写成[data-roles~="admin"]，漏掉引号会直接导致选择器无效。
~=选择器在现代项目里还值得用吗
值得，但使用范围比过去窄了——它只在明确需要“多值中含某词”语义时才不可替代，比如[class~="sr-only"]、[lang|="zh"]、[rel~="stylesheet"]。
更多时候，开发者其实在用错场景：
- 想匹配
class="btn btn-lg"中的btn，其实该用.btn类选择器，更高效也更符合语义 - 想筛
data-status="loading error"，用[data-status~="error"]是对的；但若状态是data-status="has-error"，就得换*="error"或重构数据格式 - Vue/React组件中动态绑定
class，若生成class="btn active hover"，用[class~="active"]能工作，但不如监听data-active这类布尔属性清晰
最常被忽略的一点：~="value"不支持正则、不支持通配符、不支持大小写忽略（除非加i），它就是一个朴素的空格切分+全字匹配——别指望它做超出设计的事。
