[class*="xxx"] 是子串匹配，不区分单词边界，会误匹配如 "sub-btn"；[class~="xxx"] 才是完整类名匹配，等价于 .xxx；^ 和 $ 匹配属性值首尾，不适用于单词边界场景。
用 [class*="xxx"] 匹配 class 名中任意位置含字符的元素
属性选择器 [class*="xxx"] 是最直接的方案，它会在整个 class 属性值字符串中做子串匹配，不区分单词边界。比如 <div class="btn-primary disabled"> 会被 [class*="dis"] 选中，因为 "disabled" 包含 "dis"。
注意：它匹配的是 HTML 中 class 属性的原始字符串（空格分隔），不是解析后的类名列表。所以 [class*="btn"] 也会命中 class="button btn-large"，但同样会误伤 class="sub-btn-icon" —— 只要字符串里有 "btn" 就算。
- 适用于快速筛选含某前缀/中缀/后缀的元素，比如调试时临时高亮所有带
"error"的节点 - 不能保证是完整类名匹配，
[class*="col"]会同时选中col-12和social-link - 性能上无明显开销，但过度依赖可能掩盖语义混乱的 class 命名问题
[class~="xxx"] 才是真正的“完整类名”匹配
如果目标是匹配独立、完整的类名（即以空格或前后边界分隔的单词），必须用波浪号 ~，写成 [class~="btn"]。它等价于 .btn，但更显式地表明你在操作属性值。
例如：<span class="btn btn-lg primary"> → [class~="btn"] ✅；<span class="btn-group"> → [class~="btn"] ❌（因为 "btn-group" 是一个整体，不是独立的 "btn"）。
立即学习“前端免费学习笔记（深入）”；
-
[class~="xxx"]和.xxx行为一致，支持多个类名并存场景 - 不能用于模糊匹配，
[class~="btn"]不会匹配class="btn-primary" - 若 class 值含多余空格（如
class=" btn "），浏览器会自动 normalize，不影响匹配
组合使用避免误匹配：用 :not() 排除干扰项
当 [class*="xxx"] 太宽泛、但又无法改 HTML 类名时，可配合 :not() 过滤掉明显不符合意图的 case。比如想选所有含 "modal" 但不含 "backdrop" 的元素：
div[class*="modal"]:not([class*="backdrop"]) { /* ... */ }这种写法在遗留系统或第三方组件中很实用，但逻辑变复杂，维护成本上升。
- 优先考虑重构 class 命名，比如统一用
js-modal-trigger而非依赖语义词匹配 -
:not()里不能用伪类（如:not(:hover)），但可以嵌套属性选择器 - 多层
:not()组合易出错，建议用 DevTools 实时验证匹配结果
不要用 [class^="xxx"] 或 [class$="xxx"] 替代单词边界匹配
^ 和 $ 分别匹配属性值开头和结尾，但它们针对的是整个 class 属性字符串，不是单个类名。例如：[class^="btn"] 只能匹配 class="btn btn-lg"（开头是 "btn"），却无法匹配 class="text-center btn"（"btn" 在中间）。
更糟的是：[class$="-btn"] 会漏掉 class="btn btn-sm"（结尾是 "sm"），也误中 class="submit-btn disabled"（结尾是 "disabled"，不满足条件）—— 它根本不管单词边界。
- 这些选择器只适合极少数场景，比如强制要求 class 属性必须以某字符串开头（如 BEM 的
block__elem--mod规范） - 试图靠
[class^="btn-"]模拟 BEM 元素匹配？得确保所有 class 都严格按顺序书写，且没有前置其他类名 - 一旦 HTML 中 class 顺序变动或插入新类，
^/$就失效，比*=更脆弱
实际项目里，真正需要“包含特定字符”的场景往往暴露了 class 命名粒度或结构问题。优先用 [class~="xxx"] 或语义化 class 名，*= 只该作为临时手段，尤其要注意它对连字符、缩写、拼写变体的敏感性。
