CSS属性选择器不支持正则等真正模糊匹配，仅提供^=（前缀）、$=（后缀）、*=（子串包含）三种字符串位置匹配；~=用于多值属性的单词匹配，|=用于连字符语言代码匹配；复杂需求须用JavaScript。
用 [attr*="val"] 匹配属性值中任意位置的子串
这是日常开发中最常被当作“模糊匹配”使用的写法，但它实际只是**子串包含判断**，不是语义或模式上的模糊。
- ✅ 适用场景：筛选
data-自定义属性含关键词的元素，如[data-status*="error"]选中data-status="network-error"或data-status="error-500" - ⚠️ 大小写敏感：默认不匹配
ERROR；加i标志可忽略大小写（[data-type*="user" i]），但 IE 完全不支持 - ❌ 易误命中：比如
[id*="1"]会同时匹配id="1"、id="item-123"、id="debug1flag"—— 若只想精确匹配数字 ID，应改用[id="1"]或 JS 辅助
用 [attr^="prefix"] 和 [attr$="suffix"] 做边界限定
当 `*=` 太宽泛时，用 `^=` 或 `$=` 能显著收窄匹配范围，更安全可靠。
-
[href^="https://"]只选 HTTPS 链接，不会误中http://或含https字样的其他字符串（如"something-https-config"） -
[src$=".webp"]精准识别 WebP 图片，比[src*=".webp"]更少误判（后者可能命中src="icon-webp-legacy.png"） - ⚠️ 注意空格影响：对
class这类空格分隔多值属性，[class$="btn"]几乎无效，因为整个值是"btn primary"，结尾不是"btn"；此时应改用[class~="btn"]（匹配独立单词）
别把 [attr~="val"] 当成模糊匹配，它是“单词级匹配”
~="val" 不是模糊，而是专为多值属性（如 class、lang）设计的**空格分隔单词匹配**，和点号选择器 .val 行为一致。
- ✅ 正确用法：
[class~="disabled"]匹配class="btn disabled"，不匹配class="btn-disabled"或class="is-disabled" - ❌ 错误期待：它不能匹配
class="disabling"或class="disable"—— 没有“词根”或“相似度”逻辑，只认完整单词 - ? 小技巧：想匹配带连字符的命名空间（如
lang="zh-CN"），可用[lang|="zh"]，它等价于lang="zh"或lang="zh-CN"等
querySelectorAll() 配合 .filter() 或 RegExp —— CSS 本身做不到。 
