CSS属性选择器实现模糊匹配详解

从现在开始，我们要努力学习啦！今天我给大家带来《CSS中使用属性选择器可以实现对具有特定属性但值不固定的元素进行模糊匹配。具体来说，可以通过 [attr*=value] 的方式来选择属性值中包含指定字符串的元素。语法说明：[attribute*="value"] { /* 样式规则 */ }attribute 是要匹配的属性名（如 class, id, href 等）。value 是要匹配的字符串。*= 表示“属性值中包含该字符串”。示例：HTML关于 联系我们 服务CSSa[href*="about"] { color: red; }在这个例子中，所有 href 属性中包含 "about" 的 标签都会被选中并设置为红色。其他相关选择器：选择器说明[attr=value]属性值等于指定值[attr!=value]属性值不等于指定值[attr^=value]属性值以指定值开头[attr$=value]属性值以指定值结尾`[attr*=value》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

[attr*="value"] 是CSS子串匹配属性选择器，用于选中属性值任意位置包含指定字符串的元素；它区分大小写，可加i标志忽略大小写，但易误匹配需谨慎使用。

要选中带有某个属性但值不固定、且包含特定子串的元素，用 [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"
• 若只需匹配数字 ID，优先考虑 [data-id="1"] 或正则类方案（CSS 本身不支持正则，需 JS 辅助）

今天关于《CSS属性选择器实现模糊匹配详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！