必须用[attr~="value"]而非[attr="value"]，因为~=按单词边界精确匹配空格分隔的独立值，而=是子串匹配易致误选、样式污染和调试困难。
[attr~="value"] 是唯一能正确匹配空格分隔多值属性中独立单词的选择器，其他写法（如 *= 或 =）都会破坏语义边界或引入误匹配。
为什么必须用 [attr~="value"] 而不是 [attr*="value"]
因为 [attr*="value"] 是子串匹配，不区分单词边界。比如 class*="btn" 会同时命中：class="btn"、class="btn-primary"、class="subtle-btn"，甚至 class="button"（如果浏览器做模糊匹配）。而真实项目里，你只想影响带 btn 这个独立语义词的元素，不是所有含 “btn” 字符的 class。
常见后果：
-
[class*="error"]会意外选中class="server-error"或class="warning-error"，导致错误样式污染 - 后期类名重构（如从
btn改成c-btn）时，*=规则仍生效，但已失去原始意图 - 调试困难：你改了 HTML 的 class，但样式还在，找不到源头
[attr~="value"] 的匹配规则和限制
它只对空格分隔的多值有效，且要求 value 是完整、独立的单词（前后必须是空格或边界）。
-
[class~="primary"]匹配class="primary"、class="btn primary large"，但不匹配class="primary-btn"或class="sub-primary" - 大小写敏感：
[lang~="en"]不匹配lang="EN"；需忽略大小写时加i标志：[lang~="en" i] - 连字符
-不是分隔符，所以[class~="form"]不匹配class="form-control" - 不能用于下划线或点号分隔的值，比如
data-role="admin_user"中的admin无法用~=安全提取
如何组合使用提升准确性
单靠 ~= 容易撞上命名冲突，尤其在大型项目中。建议叠加标签、状态或其它属性约束。
- 限定元素类型：
button[class~="primary"][type="submit"]比[class~="primary"]更安全 - 排除禁用态：
input[class~="required"]:not([disabled])避免对灰掉字段重复应用必填样式 - 配合伪类：
a[rel~="noopener"][href^="https"]精准锁定安全外链 - 避免泛用：
[class~="hidden"]很危险——很多框架（如 Bootstrap）也用hidden，可能覆盖预期行为
真正容易被忽略的一点是：多值匹配只对空格分隔有效，而开发中常把多个语义塞进一个 class 字符串里（如 class="card card--sm card--bordered"），这时 ~= 仍然有效，但前提是书写规范——不能写成 class="card--sm" 却指望 [class~="sm"] 匹配成功，因为 sm 并非独立单词。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
