[attr*="value"] 是CSS子串匹配属性选择器，用于选中属性值任意位置包含指定字符串的元素；它区分大小写，可加i标志忽略大小写，但易误匹配需谨慎使用。
![css选中带有某属性但值不固定的元素_使用[attr*=value]模糊匹配](https://img.php.cn/upload/article/000/969/633/176640636085802.jpeg)
要选中带有某个属性但值不固定、且包含特定子串的元素，用 [attr*=value] 是最直接的方式——它匹配属性值中**任意位置包含指定字符串**的元素。
什么是 [attr*=value]？
这是 CSS 的属性选择器之一，属于“子串匹配”类型：
-
[attr="value"]：完全相等（精确匹配） -
[attr^="value"]：值以value开头 -
[attr$="value"]：值以value结尾 [attr*="value"]：值中任意位置包含value（即模糊包含）
常见使用场景举例
比如你想给所有 data-type 属性里含 "user" 的按钮加样式：
CSS 写成：
立即学习“前端免费学习笔记（深入）”；
[data-type*="user"] {
background-color: #4285f4;
color: white;
}
前两个按钮会被选中，第三个不会。
注意大小写和空格
该选择器默认区分大小写，且会把空格、连字符、下划线都当作普通字符处理：
-
[class*="btn"]可匹配class="btn-primary"、class="my-btn"、class="button-btn-1" - 但不会匹配
class="Btn-primary"（大小写不一致） - 如需忽略大小写，可加
i标志：[class*="btn" i]（现代浏览器支持，IE 不支持）
慎用，避免意外命中
因为是“包含匹配”，容易误选：
-
[href*="http"]会同时匹配http://和https://，甚至httpsomething -
[data-id*="1"]会匹配data-id="1"、"10"、"100"、"abc1def" - 若只需匹配数字 ID，优先考虑
[data-id="1"]或正则类方案（CSS 本身不支持正则，需 JS 辅助）
