[href^="http"]不可靠——仅匹配小写http开头，漏https、//、大写http，且误判含http子串的内链；应改用a[target="_blank"]等语义化标记精准识别外链。
纯靠 [href^="http"] 匹配外部链接，基本不可靠——它漏 HTTPS、协议相对链接（//）、大小写变体，还容易误判含 http 字符串的内链参数。
为什么 [href^="http"] 总是漏掉外链
这个选择器只匹配 href 属性值**严格以小写 http 开头**的字符串，不支持协议变体或忽略大小写：
-
https://example.com→ 不匹配（开头是https） -
//cdn.example.com→ 不匹配（开头是//） -
HTTP://OLD.COM→ 不匹配（大小写敏感） -
/page?ref=http%3A%2F%2Ftest.com→ 意外匹配（href值里含http子串）
用多个前缀组合勉强覆盖常见外链形式
如果必须基于 href 字符串做判断，至少要显式写出三种协议前缀，不能偷懒缩写：
- 写全
a[href^="http://"]、a[href^="https://"]、a[href^="//"] - 注意：这三个选择器之间用逗号分隔，不是嵌套或逻辑或
- 仍无法解决同域 CDN 链接（如
//assets.myapp.com）是否算“外链”的语义问题 - 静态资源链接（
//fonts.googleapis.com）和跳转链接（https://blog.example.com）在用户行为上完全不同，但 CSS 无法区分
真正可靠的方式：放弃解析 href，改用语义化标记
浏览器渲染时看不到重定向、不知道当前域名、也无法执行字符串比对逻辑。最稳的选择是让 HTML 显式表达意图：
- 所有应新开页的外链，本就该带
target="_blank"和rel="noopener"—— 这是安全与可访问性规范强制要求的 - 对应 CSS 写成
a[target="_blank"]（务必加引号，a[target=_blank]在部分浏览器中无效） - 更推荐前后端协作：后端/构建工具自动给外链加
rel="external"或class="external"，CSS 用a[rel="external"]或a.external精准选中 - 内链也可主动加
class="internal"，比“排除外链”更可控、无歧义
靠 URL 字符串做判断，本质是在用静态文本模拟动态行为；而真实跳转目标、是否同源、是否触发页面离开，CSS 根本无从得知。把判断逻辑交给 HTML 层的语义标记，才是可维护、可测试、不踩坑的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
