[href^="http"] 仅匹配以小写“http”开头的链接，故漏掉 https://、// 协议相对链接及大写 http://；它属严格前缀匹配，无法识别协议变体或同域资源，误判率高，真正可靠方式是用 a[target="_blank"] 或语义化标记如 rel="external"。
用 [href^="http"] 匹配外链，为什么总漏掉 HTTPS 和协议相对链接
写 a[href^="http"] 看似能抓到所有外链，但实际只匹配以 http 开头的 href 值，会直接漏掉 https://example.com（开头是 https）、//cdn.example.com（无协议）、甚至 HTTP://OLD.COM（大小写敏感）。CSS 属性选择器默认区分大小写，且 ^= 是“严格前缀匹配”，不支持正则或忽略协议变体。
常见错误现象包括：外部博客链接没加图标、邮件链接 mailto:test@x.com 被误标（因含 http 字符串）、内链带参数如 /page?ref=http%3A%2F%2Ftest.com 反而被命中。
- 必须显式覆盖三种主流形式：
a[href^="http://"]、a[href^="https://"]、a[href^="//"] - 避免单独用
[href^="http"]—— 它不是缩写，而是精确字符串匹配 -
[href*="http"]更危险，会匹配href="article-about-http-protocols"这类纯文本
为什么 [href^="https://"] 仍可能误判内部资源
前端路由场景下，href="/api/data" 是内部请求，但若后端返回重定向到 https://api.example.com，用户最终跳转的是外部地址——而 CSS 在渲染时完全看不到重定向结果。此时仅靠 href 字符串无法反映真实跳转目标。
更现实的问题是 CDN 链接：href="//fonts.googleapis.com" 是外链，但 href="//assets.myapp.com" 可能属于同域（取决于当前页面协议和域名）。CSS 没法读取 window.location.origin，所以无法做「是否同源」判断。
- 协议相对链接
//的本质是复用当前页面协议，不是外链信号 - 静态资源路径（如
//cdn.myapp.com/logo.png）通常不应被样式归类为「外部链接」，因其不触发页面跳转 - 真正需要视觉区分的，是用户点击后会离开当前站点的操作，而非所有带协议的 URL
比 [href^="http"] 更稳的 CSS 选择方式
最轻量且语义明确的做法，是放弃从 href 解析，转而依赖开发者主动标记的意图。外部链接几乎总是需要 target="_blank" + rel="noopener"，这是可访问性与安全规范强制要求的，也是 HTML 层最可靠的外链信号。
对应 CSS 写法就是 a[target="_blank"] —— 它不关心 href 是什么，只响应明确的跳转行为声明。
- 务必写全引号：
a[target="_blank"]，不能写成a[target=_blank]（部分浏览器不认） - 不要用
[target*="_blank"]，它会错误匹配target="_blank noreferrer"（虽然该写法本身不合法，但存在） - 如果项目已用
rel="external"或class="external"，优先用a[rel="external"]或a.external，语义更强、零歧义
真正需要 href 判断时，怎么减少误判
当必须基于 href 处理（比如无法修改 HTML 输出的 CMS 场景），组合匹配比单条规则可靠：
a[href^="http://"], a[href^="https://"], a[href^="//"] 覆盖绝大多数真实外链，但仍需人工排除三类干扰：
- 内链中带协议字符串的查询参数（如
?utm_source=http://xxx）→ 改用后端模板过滤，或 JS 预处理移除 - 伪协议：
javascript:、tel:、mailto:→ 单独写a[href^="javascript:"], a[href^="tel:"], a[href^="mailto:"]并设为all: unset重置样式 - 同域 CDN：
//assets.myapp.com→ 若域名固定，可用:not([href*="myapp.com"])排除，但注意这会漏掉子域差异（如blog.myapp.com）
纯 CSS 做 URL 语义分析，本质上是在补救缺失的语义标记。越依赖 href 字符串，后期维护成本越高；越早让链接带上 data-link-type 或 rel，后续样式和 JS 行为就越干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
