[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"] 匹配
  、，但不匹配
• 必须是完整单词：空格前后或开头/结尾才算边界，~="a" 不会匹配 data-id="abc"
• 对大小写敏感，[lang~="en"] 不匹配 lang="EN"；如需忽略大小写，加 i 标志：[lang~="en" i]

为什么不能用 [attr*="value"] 替代多值匹配

[attr*="value"] 是子串匹配，容易误选。比如 [class*="btn"] 会同时命中 class="btn"、class="btn-primary"、class="subtle-btn"，失去语义控制力。

• 常见误用场景：用 [class*="error"] 想高亮错误状态，结果也选中了 class="server-error" 或 class="warning-error"
• 性能上无明显差异，但可维护性差——后期改类名（如从 btn 改成 c-btn）会导致样式意外失效或蔓延
• 真正需要子串匹配时（如筛选含 “admin” 的 data-role），才该用 *=；多值场景请坚持用 ~=

[attr|="value"] 适用于连字符分隔的语言类属性

[attr|="value"] 专为类似 lang 这种用连字符分隔的属性设计，匹配以指定值开头且后跟 - 或直接结束的情况。它和 ~= 完全不同用途，别混用。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• [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 精准锁定安全外链的悬停态

真实项目里最容易被忽略的是：**多值属性匹配只对空格分隔有效，而开发者常误以为 class 中的连字符也算“单词边界”**。写 [class~="form-error"] 永远不会生效——这时候要么改用 [class*="form-error"]（接受误匹配风险），要么重构 class 命名（如 class="form error"），否则就得放弃属性选择器，老实用 class 列表控制。