CSS属性选择器的正则匹配_^、$、*符号的精准定位

^=、$=、= 仅支持字面量前缀/后缀/子串匹配，不支持正则语法；如^[0-9]无效，|非“或”逻辑，= 区分大小写且无单词边界，复杂匹配应交由 js 处理。

Attribute selector 中 ^=、$=、*= 的实际匹配边界

这三个符号不是正则，是 css 属性选择器的“子串定位操作符”，但很多人误以为它们支持完整正则语法，结果写 [data-id^="d+"] 这种写法——直接失效。

它们只做**字符串前缀/后缀/包含匹配**，不解析转义、不支持量词、不认 d 或 + 等正则元字符：

• ^=：严格从属性值开头匹配字面量（如 [class^="btn-"] 匹配 class="btn-primary"，不匹配 " my-btn"）
• $=：严格匹配结尾字面量（[href$=".pdf"] 可以，但 [src$="[0-9].jpg"] 不行）
• *=：只要中间连续出现该子串就匹配（[alt*="Error"] 匹配 "Validation error occurred"，也匹配 "no-error"）

为什么 [attr^="a|b"] 不等于正则的 ^(a|b)

CSS 选择器里没有分组、或逻辑、锚点概念。^= 后面只能跟一个静态字符串，| 在这里就是普通字符，不是“或”。

想实现“以 a 或 b 开头”，只能拆成两个选择器并联：

立即学习“前端免费学习笔记（深入）”；

[data-type^="a"], [data-type^="b"] { color: red; }

或者换思路：用 JS 动态加 class，再用简单类名选择器。纯 CSS 没有“多前缀 OR 匹配”原生能力。

• 浏览器不会把 ^="a|b" 当成正则解析，而是当字面量匹配字符串 "a|b"
• 哪怕写成 ^="a|b"，CSS 解析器也不处理反斜杠转义（除非是 Unicode 转义如 61）
• 这种需求在构建时可通过 postcss 插件展开，但运行时 CSS 引擎不支持

*= 容易误伤：空格、大小写、HTML 实体都算字符

*= 是最危险的一个——它不区分单词边界，也不忽略空格或大小写。

比如 [title*="edit"] 会意外命中：title="editable content"、title="EDIT mode"、甚至 title="&edit; button"（因为 & 解析后是 & 字符，但 edit 仍连续存在）。

• 它对大小写敏感（*="Edit" 不匹配 "edit"），没 i 标志可加
• 无法跳过 HTML 实体或 Unicode 字符干扰（如 café 中的 é 是单个字符，*="cafe" 不匹配）
• 若需精确单词匹配，必须靠 JS + Element.getAttribute() + 正则，CSS 做不到

真正需要正则匹配时，别硬扛 CSS 选择器

如果业务逻辑依赖动态模式（比如匹配邮箱格式、版本号、路径路由），CSS 属性选择器不是合适工具。

更可靠的做法是让 JS 提前判断并挂 class：

el.classList.toggle("is-external", /^https?:///.test(el.href));

然后用 .is-external 写样式。这样可控、可调试、兼容性无死角。

• CSS 选择器引擎不暴露匹配过程，出错了没法 console.log 查哪段没对上
• 某些旧版 safari 对 $= 处理有 bug（比如末尾带空格的属性值）
• 用 :is() 或 :where() 组合多个 ^=/$= 选择器虽可行，但可读性和维护性迅速下降

真要靠属性值驱动样式，优先保证属性值本身结构规整（比如统一用 kebab-case、避免空格和特殊符号），比在选择器里搞花活靠谱得多。