如何选择href以http开头且不含img标签或类名以fa开头元素的a标签？及如何通过Font Awesome为符合条件的链接添加外部链接标识

嘿，我来帮你搞定这个需求！你的目标是给不含图片或Font Awesome子元素的外部链接添加图标，但当前的CSS写法存在逻辑错误，咱们一步步修正：

核心问题分析 #

你原来的代码里，a[href^="https"]::after > :not(img, [class^="fa"]) 写法完全不对：

• ::after 是<a>标签的伪元素，它是<a>的子元素，你不能用>去反向选择父元素的子元素
• 逻辑搞反了：你需要先筛选出符合条件的<a>标签，再给它们添加伪元素，而不是给伪元素设置选择器

正确的CSS解决方案 #

现代浏览器支持CSS Selectors Level 4的:has()伪类，我们可以用它来精准筛选符合要求的<a>标签：

/* 匹配所有href以http/https开头，且不含img或.fa开头子元素的a标签 */
a[href^="http"]:not(:has(img)):not(:has([class^="fa"]))::after {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: " ";
    margin-left: 4px; /* 可选：给图标加一点间距，更美观 */
}

代码解释 #

• a[href^="http"]：匹配所有href以http开头的链接（涵盖http://和https://的外部链接）
• :not(:has(img))：排除那些包含<img>子元素的<a>标签（比如图片链接）
• :not(:has([class^="fa"]))：排除那些包含类名以fa开头的子元素的<a>标签（比如已经包含Font Awesome图标的链接）
• ::after：给筛选后的<a>标签添加后置伪元素，显示Font Awesome图标

旧浏览器兼容方案 #

如果需要兼容不支持:has()的旧浏览器（比如Chrome 105之前、Firefox 121之前的版本），可以用JavaScript来辅助筛选：

// 选择所有符合href条件的a标签
const externalLinks = document.querySelectorAll('a[href^="http"]');

externalLinks.forEach(link => {
    // 检查是否包含img或.fa开头的子元素
    const hasImg = link.querySelector('img') !== null;
    const hasFaIcon = link.querySelector('[class^="fa"]') !== null;
    
    // 如果都不包含，添加自定义类
    if (!hasImg && !hasFaIcon) {
        link.classList.add('external-link');
    }
});

然后用CSS针对这个类添加图标：

a.external-link::after {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: " ";
    margin-left: 4px;
}

这样就能在新旧浏览器中都实现你的需求啦！

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