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"])
