用[attr*=value]可匹配属性值中任意位置包含子串的元素，如[title*="error"]；但class属性慎用此写法，易误匹配，应优先使用类选择器或[class~="word"]。
用 [attr*=value] 匹配属性中包含某字符串的元素
直接上结论：想选“属性值里含有某个子串”的元素，就用 [attr*=value] 这个属性选择器。它不区分位置，只要 attr 的值里连续出现 value，就命中。
常见错误是误用 [attr~=value]（空格分隔的单词匹配）或 [attr^=value]（只认开头），结果怎么都选不到目标元素。
-
[title*="error"]能选中<div title="Network error occurred">，也能选中<p title="validation-error-404"> - 但
[title~="error"]只会匹配title="something error other"这种用空格分开的独立单词 - 注意 value 是纯字符串匹配，不支持正则、不忽略大小写（
ERROR≠error）
data-* 属性是最佳实践场景
实际项目里，[attr*=value] 最稳妥的用武之地是自定义 data- 属性。浏览器不校验它的值，你可自由设计命名规则，比如用连字符分隔语义段。
例如统一用 data-role="modal-confirm"、data-role="modal-alert"，那么：
立即学习“前端免费学习笔记（深入）”；
-
[data-role*="modal"]一次性选中所有 modal 类型组件 -
[data-role*="confirm"]单独捞出确认类弹窗，不用给每个加额外 class - 避免污染 class 名称空间，也比写一堆
.modal.confirm更易维护
小心 class 属性里用 *= 的陷阱
很多人想靠 [class*="btn"] 选按钮，但这是高危操作——class 是空格分隔的多值列表，*= 会把整个 class 字符串当一个整体匹配。
比如 <button class="btn-primary btn-lg">，[class*="btn"] 确实能命中；但 <span class="attention"> 也会被误选（因为 "attention" 含 "btn"）。
- 真正安全的做法永远是
.btn（类选择器）或[class~="btn"]（单词匹配） -
[class*="btn"]在大型项目里极易引发意外交互，尤其当 class 值动态拼接时（如class="${base}-btn ${size}-btn"） - 如果必须模糊匹配 class，优先考虑 JS 侧用
element.classList.contains()控制逻辑，CSS 层保持明确
性能与兼容性没悬念，但别滥用
[attr*=value] 在所有现代浏览器（包括 IE7+）都原生支持，性能和普通属性选择器持平，不用担心渲染卡顿。
真正的问题在于可读性和意图传达——它太“宽泛”，容易让后续维护者困惑：“这个选择器到底想抓什么？”
- 优先用精确匹配：
[data-status="pending"]比[data-status*="pend"]更可靠 - 如果 value 含特殊字符（如
.、-），记得加引号：[data-id*="user.123"]→ 正确写法是[data-id*="user.123"]（其实点号不用转义，但引号防错） - 多个条件组合时，
[data-type*="api"][data-method="POST"]比单个模糊选择器更可控
模糊匹配不是银弹，它解决的是“结构规律明显但命名不统一”的过渡场景。一旦发现要靠它兜底多次，该重构 HTML 结构了。
