[attr~="value"]用于匹配空格分隔的多值属性中完全相等的独立单词，如[class~="btn"]匹配class="btn"或"btn primary"，但不匹配"btn-primary"；它区分大小写，不支持连字符作为分隔符。
如何用 [attr~="value"] 匹配空格分隔的多值属性
当属性值由空格分隔多个单词（如 class="btn primary large" 或 rel="noopener noreferrer"）时，[attr~="value"] 是唯一能正确匹配“独立单词”的选择器。它不会把 class="form-error" 当作 error 的匹配项，因为 - 不是分隔符。
-
[class~="btn"]匹配<div class="btn">、<code><span class="btn primary"></span>，但不匹配<div class="btn-primary"> <li>必须是完整单词：空格前后或开头/结尾才算边界，<code>~="a"不会匹配data-id="abc" - 对大小写敏感，
[lang~="en"]不匹配lang="EN"；如需忽略大小写，加i标志：[lang~="en" i] - 常见误用场景：用
[class*="error"]想高亮错误状态，结果也选中了class="server-error"或class="warning-error" - 性能上无明显差异，但可维护性差——后期改类名（如从
btn改成c-btn）会导致样式意外失效或蔓延 - 真正需要子串匹配时（如筛选含 “admin” 的
data-role），才该用*=；多值场景请坚持用~= -
[lang|="zh"]匹配lang="zh"、lang="zh-CN"、lang="zh-TW"，但不匹配lang="zho"或lang="zh_cn"（下划线不触发） - 不能用于
class：即使写成[class|="btn"]，也不会匹配class="btn primary"，因为class值不是连字符结构 - 实际项目中，
lang、data-locale等自定义属性若按en-US格式组织，才适合用|= - 限定标签类型：
button[class~="primary"][type="submit"]比单纯[class~="primary"]更安全 - 排除禁用状态：
input[class~="required"]:not([disabled])避免对灰掉的字段也应用必填样式 - 与伪类联用：
a[rel~="noopener"][href^="https"]:hover精准锁定安全外链的悬停态
为什么不能用 [attr*="value"] 替代多值匹配
[attr*="value"] 是子串匹配，容易误选。比如 [class*="btn"] 会同时命中 class="btn"、class="btn-primary"、class="subtle-btn"，失去语义控制力。
[attr|="value"] 适用于连字符分隔的语言类属性
[attr|="value"] 专为类似 lang 这种用连字符分隔的属性设计，匹配以指定值开头且后跟 - 或直接结束的情况。它和 ~= 完全不同用途，别混用。
组合多个属性选择器提升精度
单靠 ~= 有时还不够，尤其当属性值重复率高或需排除干扰时，应叠加其他条件。
立即学习“前端免费学习笔记（深入）”；
[class~="form-error"] 永远不会生效——这时候要么改用 [class*="form-error"]（接受误匹配风险），要么重构 class 命名（如 class="form error"），否则就得放弃属性选择器，老实用 class 列表控制。
