[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 中属性未加引号？ 是合法的，但 CSS 里仍要用 [data-id*="123"]，引号不是必须的，但值含特殊字符时必须加
• 属性存在但值为空？ 的 required 是布尔属性，没有值，[required*=""] 不会匹配 —— 此时该用 [required]

[data-mode*="dark"] { background: #1a1a1a; color: #eee; }
[data-mode*="light"] { background: #fff; color: #333; }
/* 如果 data-mode="dark-mode", 两条都会生效，后者覆盖前者 —— 顺序很重要 */

真正难处理的是多值语义和动态生成的属性内容，这时候光靠 *= 往往不够，得结合 JS 或更精细的属性设计。