[attr*=”value”]用于属性值任意位置包含指定子串的匹配，属css“包含匹配”语法，不区分大小写、不支持转义或单词边界控制，与^=（前缀）、$=（后缀）分工明确。
css属性选择器中如何用[attr*="value"]做子串匹配
当需要匹配某个属性值中**包含指定字符串**（不区分位置，只要出现即可），就用星号*通配符。它属于css属性选择器的“包含匹配”语法，不是正则，也不支持转义或大小写控制。
-
[title*="Error"]匹配所有title属性值里含有"error"的元素，比如title="System error occurred"或title="warning: invalid_error_format" - 注意：这是**全字符匹配**，不是单词边界匹配 ——
[class*="btn"]会命中class="tuc-19bc10f7-b17f9b-0 button-primary tuc-19bc10f7-b17f9b-0"（因为"button"含"btn"），这点常被误判 - 若需更精确控制，得配合其他选择器或 js 补充，纯 CSS 无法实现“单词开头/结尾/独立单词”这类语义
为什么[attr^="value"]和[attr$="value"]不能替代*=
这三个符号分工明确：^= 是前缀匹配，$= 是后缀匹配，*= 是任意位置子串匹配。混用会导致漏选或误选。
-
[src^="https://"]只抓以https://开头的链接，但https://cdn.example.com/img.jpg?cache=1和https://example.com都符合；而[src*="cdn"]才能单独筛出含"cdn"的资源 - 如果写成
[data-id$="2"]去找 ID 末尾是 2 的元素，却遇到data-id="102"或data-id="22"，也会被意外选中 —— 这时候其实该用*=或换 JS 解析 - 浏览器对这三类选择器的性能基本一致，但过度依赖
*=在大量节点时仍可能触发重排/重绘，尤其在动态更新 class 的场景下
实际项目中容易踩的坑：空格、大小写与 html 特性
CSS 属性选择器匹配的是**属性的原始字符串值**，不经过 HTML 解析或标准化处理，所以空格、大小写、引号类型都影响结果。
-
[alt*="logo"]不会匹配alt="Logo"（大小写敏感），也不匹配alt=" logo "（首尾空格算字符） -
[class*="menu"]在class="tuc-19bc10f7-b17f9b-0 header-menu active tuc-19bc10f7-b17f9b-0"中能命中，但在class="menu-item"中也命中 —— 很多开发者以为它只匹配完整单词，其实不是 - HTML 中未加引号的属性值（如 ）会被浏览器自动标准化为小写，但 CSS 选择器仍按书写形式匹配；建议统一用双引号 + 小写，减少歧义
当
*=不够用时，该考虑什么替代方案纯 CSS 的
*=能力有限，遇到复杂筛选逻辑（如“包含但不以某字符开头”“匹配整个单词”“忽略空格和连字符”），就得跳出选择器思维。立即学习“前端免费学习笔记（深入）”；
- 优先用语义化 class 替代模糊匹配：把
[data-type*="user"]改成.user-card、.user-list，更可控也更易维护 - 动态场景下，用 JS 获取元素后调用
el.getAttribute('data-xxx').includes('...')或正则，再添加临时 class 供 CSS 操作 - 构建工具（如 postcss）可将自定义伪类（如
:has-text("error")）编译为兼容性 fallback，但目前原生 CSS 还不支持
真正难的不是写对
*=，而是判断什么时候不该用它 —— 尤其当需求描述里出现“大概”“类似”“差不多”这种词时，往往意味着该换思路了。 - 优先用语义化 class 替代模糊匹配：把