无需JS能否通过CSS为本地链接和全局外部链接设置不同样式？

方案1：通过链接路径属性区分（无需修改HTML结构） #

如果你的站内链接统一用相对路径（比如/article/123），或者绝对路径都包含你自己的站点域名，可以直接用CSS属性选择器筛选：

• 筛选所有相对路径内部链接：用a[href^="/"]选择器，匹配所有href以/开头的链接
• 筛选所有外部链接：用a[href^="http"]选择器，匹配所有带http/https协议的外站链接，也可以追加排除你自己的域名，适配内部也用绝对路径的场景
  示例代码：

/* 内部链接默认样式 */
a[href^="/"], a[href*="你的站点域名.com"] {
  color: #2563eb;
  text-decoration: underline;
}

/* 外部链接样式 */
a[href^="http"]:not([href*="你的站点域名.com"]) {
  color: #16a34a;
  /* 可选：追加外部链接标识 */
  &::after {
    content: " ↗";
    font-size: 0.8em;
  }
}

方案2：给不同类型链接加自定义class（最稳妥，维护性最高） #

如果可以修改链接的生成逻辑，建议在输出HTML的时候直接给两类链接追加不同的class属性，不用依赖路径规则，适配性更强：

• 内部链接输出格式：<a href="/post/xxx" class="internal-link">我的文章</a>
• 外部链接输出格式：<a href="外站地址" class="external-link">维基百科页面</a>
  对应CSS代码：

.internal-link {
  /* 自定义内部链接样式 */
}
.external-link {
  /* 自定义外部链接样式 */
}

方案3：针对显示文本带特殊包裹符的场景 #

如果你提到的[内部链接]、[[外部链接]]是指链接的显示文本自带包裹符号，注意原生CSS暂不支持按元素文本内容筛选元素，这种场景还是建议优先调整HTML生成逻辑，给不同类型链接加专属class实现样式区分。

内容的提问来源于stack exchange，提问作者user16502467