最准确识别外链需协议+域名双重判断，但纯CSS无法获取当前域名，故推荐前后端协作：通过rel="external"、class="external"或data-link-type="external"等语义化标记，再用CSS精准选中。
直接用 [href^="http"] 只能匹配以 http 开头的链接，但会漏掉 HTTPS、混用协议（如 //example.com），也容易把内链中带 http 的参数（比如 /page?ref=http://xxx）误判为外链。
更准确识别外链：用协议+域名双重判断
真正可靠的外链判断，核心是「协议+完整域名」与当前页面不一致。纯 CSS 无法获取当前域名，所以需结合 HTML 结构或 JS 预处理，但 CSS 层面可配合约定来增强区分：
- 让后端或构建工具给外链自动加
rel="external"或class="external"，再用a[rel="external"]或a.external精准选中 - 若必须用 href 判断，推荐组合写法：
a[href^="http://"], a[href^="https://"], a[href^="//"]，覆盖常见外链协议形式 - 避免仅靠
^="http"—— 它会命中http://，但也会意外匹配http-equiv（虽然不在 href 上）或拼写错误的属性，且无法排除内链中的相对路径含http字符串的情况
内链可主动加 class 做语义化标记
比“排除外链”更可控的方式，是主动标识内链：
- 统一给站内跳转链接加
class="internal"，例如：<a href="/about" class="internal">关于我们</a> - CSS 写成
a.internal { color: #0066cc; }，清晰、稳定、无歧义 - 配合路由系统（如前端框架）可自动化添加该 class，减少人工遗漏
进阶：用 data 属性做明确分类
如果项目需要灵活控制样式或行为，推荐用 data-link-type：
立即学习“前端免费学习笔记（深入）”；
<a href="https://blog.example.com" data-link-type="external">外部博客</a><a href="/contact" data-link-type="internal">联系我们</a>- CSS 中写：
a[data-link-type="external"] { border-bottom: 1px dashed #999; } - 这种方式完全脱离 URL 字符串逻辑，语义强、可读性高、便于后续 JS 扩展（如外链自动加
target="_blank"和rel="noopener"）
基本上就这些。纯靠 CSS 的 href 属性选择器做外链判断，本质有局限；真正健壮的做法，是前后端协作，在 HTML 层就做好语义标记，CSS 只负责响应这些明确信号。
