17370845950

CSS不支持真正模糊匹配，但可用属性选择器通配符实现近似匹配：*=匹配子串（最常用）、^=匹配开头、$=匹配结尾；均不支持正则或编辑距离，复杂需求需JS实现。

CSS 中无法直接“模糊匹配”属性值，但可以通过属性选择器的通配符（如 ^=、$=、*=）实现**基于字符串位置或子串的近似匹配**，这是最接近“模糊匹配”的原生方案。

使用 *= 匹配子串（最常用）

当需要匹配属性值中**包含某段文字**时，用 [attr*="text"]。它不区分位置，只要值里有该子串就命中。

• 适合场景：匹配 class 含特定关键词、data 属性含标识符、URL 路径含某段等
• 示例：img[src*="banner"] 会选中 src="https://example.com/banner-1.jpg" 和 src="/assets/hero-banner.png"
• 注意：大小写敏感；若需忽略大小写，可加 i 标志（现代浏览器支持）：[data-type*="error" i]

使用 ^= 匹配开头（前缀匹配）

[attr^="prefix"] 只匹配属性值**以指定字符串开头**的情况，常用于统一命名空间的识别。

• 示例：[class^="btn-"] 可选中 class="btn-primary"、class="btn-danger disabled"
• 注意：它只看开头，不关心后面是否还有其他类名；若需精确匹配整个 class 值，应结合空格或正则（但 CSS 不支持正则）——此时建议改用 JS 或预处理器

使用 $= 匹配结尾（后缀匹配）

[attr$="suffix"] 匹配属性值**以指定字符串结尾**，适合处理文件扩展名、状态标记等。

• 示例：a[href$=".pdf"] 给所有 PDF 链接加图标；[data-id$="-draft"] 标记草稿项
• 注意：对 class 等空格分隔的属性效果有限（如 class="item item-draft" 不会被 [class$="draft"] 匹配），因其值整体是 "item item-draft"，结尾不是 "draft"

组合与限制说明

这些通配符不能嵌套或叠加（如不支持 [attr*="a"][attr*="b"] 表示“同时含 a 和 b”，但可用多个选择器并列实现逻辑与）；也不支持正则表达式、编辑距离或拼音匹配等真正意义上的模糊逻辑。

• 真·模糊需求（如拼写容错、相似色值、中文拼音匹配）需交由 JavaScript 实现
• CSS 层面能做的就是这三种子串定位方式，清晰、轻量、无性能负担
• 搭配伪类（如 :is()、:where()）可提升可读性，例如：:is([class*="warning"], [data-level="high"])