[attr*="value"] 是CSS子串匹配属性选择器,用于选中属性值任意位置包含指定字符串的元素;它区分大小写,可加i标志忽略大小写,但易误匹配需谨慎使用。
要选中带有某个属性但值不固定、且包含特定子串的元素,用 [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"
[data-id="1"] 或正则类方案(CSS 本身不支持正则,需 JS 辅助)