[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" 的按钮加样式：
<button data-type="admin-user">管理员</button> <button data-type="user-profile">个人资料</button> <button data-type="guest">访客</button>
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 辅助）以上就是css选中带有某属性但值不固定的元素_使用[attr*=value]模糊匹配的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
716
收藏
