[attr*="value"] 用于匹配属性值中任意位置包含指定子串的元素，适用于属性值结构不可控但含固定标识的场景，如表单字段命名不统一、动态类名、url参数匹配等，但需注意大小写敏感性、性能开销及语义模糊风险。

[attr*="value"] 能匹配属性值中任意位置包含指定字符串的元素，不是“模糊搜索”，而是严格子串匹配——只要目标字符串在属性值里出现过一次就生效。

什么时候该用 [attr*="value"] 而不是 [attr="value"] 或 [attr^="value"]

当你无法控制属性值的完整结构，但知道其中必含某个标识时，[attr*="value"] 就比全等或开头匹配更可靠：

• 表单字段命名不统一：input[name*="address"] 可同时命中 street_address、shipping_address、billing_address_line1
• 动态生成的类名或 data 属性：div[data-id*="user-"] 匹配 data-id="user-123" 和 data-id="api-user-456"
• URL 中带参数的链接：a[href*="utm_source"] 捕获所有含 utm_source 参数的外链，不管它出现在 query string 的第几位

注意：[attr*="value"] 不区分单词边界，input[name*="addr"] 也会误中 address 和 readdress —— 如果需要精确单词匹配，得换用 [attr~="value"]（空格分隔）或正则类方案（CSS 不原生支持）。

[attr*="value"] 的大小写敏感性与 i 标志

默认情况下，[attr*="value"] 区分大小写。HTML 属性值通常小写，但若后端或 JS 动态注入了大写内容，就可能漏选：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• a[href*="PDF"] 不会匹配 href="report.pdf"
• 加 i 标志可忽略大小写：a[href*="pdf" i] 同时匹配 .pdf、.PDF、.Pdf
• i 必须紧贴右括号前，不能有空格：[href*="pdf"i] 合法，[href*="pdf" i] 在部分旧浏览器中可能失效

现代浏览器（Chrome 63+、Firefox 61+、Safari 11.1+）都支持 i 标志，但 IE 完全不支持 —— 若需兼容 IE，只能靠 JS 补位或预处理属性值。

性能和可维护性提醒

[attr*="value"] 是属性选择器中性能最弱的一档，因为浏览器必须对每个匹配元素的属性值做完整扫描：

• 避免在高频重绘区域（如滚动容器内）大量使用，比如 div[title*="error"] 配合 JS 动态改 title，容易触发 layout thrashing
• 不要用它替代语义化 class：比如为按钮加样式，优先写 .btn-primary，而不是 button[data-role*="primary"]
• 当多个 *= 规则叠加时（如 input[name*="user"][type*="text"]），选择器复杂度指数上升，建议拆成独立规则或用 class 组合

真正难处理的不是语法，而是属性值本身的不可控性——比如 CMS 输出的 data-type="news-article-v2" 和 data-type="article-summary" 都含 article，但语义完全不同。这时候靠 *= 匹配反而掩盖了结构混乱的问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！