[attr*="val"] 是中间模糊匹配选择器，匹配属性值中任意位置包含指定子字符串的元素；区别于 ^=（开头匹配）和 $=（结尾匹配），注意大小写敏感、空格影响及布尔属性不适用。
css 属性选择器 [attr*="val"] 是什么
它用来匹配属性值中**包含指定子字符串**的元素，属于“中间模糊匹配”。不是开头也不是结尾，只要目标字符串在属性值任意位置出现就命中。
[href*="example"] 常见误用场景
很多人以为它能匹配 https://example.com 和 http://www.example.org，但实际也会错误匹配 https://nonexample.com（因为包含 "example" 子串）。这种漏匹配+误匹配并存的情况很常见。
- ✅ 正确用途：筛选含特定关键词的自定义属性，比如
[data-category*="promo"] - ❌ 错误假设：当作域名前缀或后缀判断（应改用
^=或$=） - ⚠️ 注意大小写：CSS 属性值匹配默认区分大小写，
[class*="btn"]不会匹配class="Button"
和 ^=、$= 的关键区别
三者都是属性选择器，但匹配逻辑完全不同，混用会导致样式失效或意外生效：
-
[attr^="val"]：只匹配属性值**以 val 开头**（如href^="https://"） -
[attr$="val"]：只匹配属性值**以 val 结尾**（如src$=".png"） -
[attr*="val"]：匹配属性值**任意位置包含 val**（如[title*="error"]）
性能上，*= 浏览器需对每个属性值做子串搜索，比 ^= 或 $= 略慢，但现代浏览器基本无感；真正影响性能的是过度嵌套或高频重排场景下滥用它。
立即学习“前端免费学习笔记（深入）”；
实战中容易忽略的细节
看似简单，但几个边界情况常导致样式不生效：
- 属性值有空格？
[data-tags*="vue"]无法匹配data-tags="react vue svelte"—— 因为实际是匹配整个字符串，中间空格也算字符。要支持多值，得用[data-tags~="vue"]（空格分隔单词匹配） - HTML 中属性未加引号？
<div data-id=123abc>是合法的，但 CSS 里仍要用[data-id*="123"]，引号不是必须的，但值含特殊字符时必须加 - 属性存在但值为空？
<input required>的required是布尔属性，没有值，[required*=""]不会匹配 —— 此时该用[required]
[data-mode*="dark"] { background: #1a1a1a; color: #eee; }
[data-mode*="light"] { background: #fff; color: #333; }
/* 如果 data-mode="dark-mode", 两条都会生效，后者覆盖前者 —— 顺序很重要 */真正难处理的是多值语义和动态生成的属性内容，这时候光靠 *= 往往不够，得结合 JS 或更精细的属性设计。
