如何排除图片上的外部链接图标样式

你当前的CSS规则会给符合条件的外部链接添加图标，但包含图片的链接（<a><img></a>）也被匹配到，导致图标出现在图片旁。要排除这类链接，只需在原有排除规则中加入对包含图片的<a>标签的过滤即可，有两种实现方式：

方式一：使用CSS :has 选择器（简洁无需修改HTML） #

直接在排除列表里添加:has(img)，它会匹配所有包含<img>子元素的<a>标签，将其排除在外：

a[href]:not(:where(
  /* 排除仅含哈希的链接 */
  [href^="#"],
  /* 排除相对路径链接（不含双斜杠开头的） */
  [href^="/"]:not([href^="//"]),
  /* 排除指定域名的链接 */
  [href*="//mydomain.de"],
  /* 排除包含图片的链接 */
  :has(img)
)):after {
    font-family: 'Font Awesome 5 Pro';
    content: '\f0c1';
    padding-left: 0.5rem;
}

注意：:has是CSS选择器 Level 4 的特性，现代浏览器已支持，但旧版浏览器（如IE）不兼容。

方式二：添加类名兼容旧浏览器 #

如果需要支持旧版浏览器，可以给包含图片的链接手动添加类名（比如image-link），再在排除规则中加入这个类：

1. 修改HTML：

<a href="外部链接地址" class="image-link">
  <img src="图片地址" alt="图片描述">
</a>

2. 更新CSS规则：

a[href]:not(:where(
  /* 排除仅含哈希的链接 */
  [href^="#"],
  /* 排除相对路径链接（不含双斜杠开头的） */
  [href^="/"]:not([href^="//"]),
  /* 排除指定域名的链接 */
  [href*="//mydomain.de"],
  /* 排除带image-link类的图片链接 */
  .image-link
)):after {
    font-family: 'Font Awesome 5 Pro';
    content: '\f0c1';
    padding-left: 0.5rem;
}

内容的提问来源于stack exchange，提问作者cd-media