[attr="value"]仅执行子串包含匹配，不支持拼音、编辑距离或单词边界识别，如[class="btn"]会误中"button"；它仅作基础字符串扫描，非真正模糊匹配。
为什么[attr*="value"]不是真正“模糊匹配”
它只是子串包含判断，不支持拼音、编辑距离、大小写忽略（除非加 i 标志）、也不识别单词边界。比如 [class*="btn"] 会误中 class="button"，因为 "button" 里含 "btn" 这三个连续字符。这不是 bug，是设计如此——CSS 属性选择器压根没定义“模糊”语义，*= 只负责最基础的字符串扫描。
什么时候该用[attr*="value"]，而不是~=或^=
当你明确要找“属性值里出现某段连续字符”，且位置不确定时，才用 *=。其他情况优先换更精确的写法：
- 想匹配空格分隔的独立单词（如
class="error warning"中的error）→ 用[class~="error"] - 只关心前缀（如统一命名的组件：
data-component="modal-header"）→ 用[data-component^="modal-"] - 只关心后缀（如文件类型：
href="report.pdf"）→ 用[href$=".pdf"] - 匹配自定义
data-属性时，*=最安全，因为值由你控制，不易冲突
容易踩的坑：class 和 title 属性的典型误用
class 是空格分隔的多值属性，[class*="icon"] 会命中 class="icon-primary"，也会命中 class="notification"（因为 "notification" 含 "noti"，而 "noti" 含 "i" —— 如果你碰巧搜 i）。这不是选择器问题，是你没约束好搜索粒度。
- 避免对
class用*=做业务逻辑判断；改用[class~="icon"]或直接写.icon -
title属性值常含自然语言，[title*="error"]可能选中 “This is not an error” 这种否定句，建议搭配 JS 做语义校验 - 大小写敏感默认开启；若需忽略，写成
[data-type*="user" i]，但 IE 完全不支持i标志 - 不要在
id上滥用*=，[id*="1"]会同时匹配id="1"、id="item-123"、id="debug1flag"
实战中怎么写才不容易翻车
核心原则：用 data- 属性承载机器可读标识，再用 *= 匹配。这样你完全掌控值格式，规避 HTML 原生属性的语义干扰。
- 给按钮加状态标记：
<button data-state="loading-error"></button>→ 用[data-state*="error"]精准捕获所有含 error 的状态 - 区分环境：
<div data-env="prod-us-east"> → <code>[data-env*="prod"]匹配生产环境，[data-env*="us"]匹配美区 - 组合使用收窄范围：
[data-role*="admin"][data-perm*="write"]表示“有写权限的管理员”，注意这不是正则与运算，而是两个独立条件同时满足 - 别忘了引号：必须写
[data-id*="draft"]，不能漏掉引号写成[data-id*=draft]，否则部分浏览器解析失败
真正难的不是写对语法，而是判断这个“关键词”是否真的适合用 CSS 原生方式匹配——一旦涉及语义、上下文或动态生成，就得让 JS 接手。
