target属性无法区分站内/站外链接，因其仅控制打开位置且与href无关；需通过href字符串匹配（css）或url构造函数（js）结合origin判断。
target 属性本身无法区分站内/站外链接——它只控制打开位置，不携带来源信息。想按站内/站外做样式区分，必须靠其他手段。
为什么不能直接用 target 判断内外链
target 的合法值只有 _blank、_self、_parent、_top 和自定义窗口名（如 "mywin"），它和链接地址无关。你完全可能对站内链接也写 target="_blank"，或对站外链接用 target="_self"。浏览器不会、也不能根据 target 推断域名。
实际可用的 CSS 区分方案：靠 href 值匹配
CSS 选择器支持属性值匹配，可结合协议和域名特征判断。常用写法如下：
-
a[href^="http://"], a[href^="https://"]匹配所有带协议的链接（含站外和绝对路径站内） -
a[href^="/"], a[href^="#"], a[href^="mailto:"], a[href^="tel:"]大致覆盖常见站内链接形态（相对路径、锚点、邮件、电话） - 更精确的站外判断：
a[href^="https://"]:not([href^="https://example.com/"]):not([href^="https://www.example.com/"])—— 注意要列全主域名和 www 变体
⚠️ 注意：href 值是字符串，CSS 不支持正则或域名解析，所以无法自动识别“同源”。必须手动穷举可信域名，且大小写敏感、路径前缀需严格一致。
配合 JavaScript 补足动态判断（推荐用于复杂场景）
纯 CSS 有硬伤：无法处理协议相对链接（//cdn.example.com/js.js）、带查询参数的跳转页、或运行时拼接的 href。这时可在 JS 中打标记：
document.querySelectorAll('a[href]').forEach(el => {
try {
const url = new URL(el.href, location.href);
if (url.origin !== location.origin) {
el.classList.add('external');
}
} catch (e) {
// 忽略非法 href，如 javascript: 或空值
}
});
之后用 a.external 写样式即可。这种方式兼容动态渲染（React/Vue），也规避了 CSS 的字符串匹配局限。
容易被忽略的细节：伪协议和相对路径边界
以下情况常被漏判：
-
href="//api.example.com/data"是协议相对 URL，origin仍与当前页相同，但 CSS 里[href^="https://"]完全不匹配 -
href="about.html"是相对路径，属站内；但href="https://about.html"是站外（协议+非法域名） -
href="https://sub.example.com/page"是否算站内？取决于你是否把子域视作同源——CSS 无法做 origin 比较，只能靠人工加规则
真正可靠的内外链判定发生在 JavaScript 的 URL 构造函数里，CSS 只适合做简单、静态、可枚举的分类。别指望单靠一个属性选择器兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
