从超链接图像中删除外部链接图标答案

【问题标题】：Remove external link icon from hyperlinked images从超链接图像中删除外部链接图标
【发布时间】：2019-02-26 19:30:50
【问题描述】：

我正在尝试找到一种从超链接图像中删除外部链接图标的方法。我希望图标仅出现在文本链接之后。我找到了这个Remove external link icon from image，但那里没有任何答案。

#myLink a[href^="//"]:after, 
#myLink a[href^="http://"]:after,
#myLink a[href^="https://"]:after {
    content: "\f35d";
    font-family: "Font Awesome"; 
    font-weight: 900;
    margin: 0 0 0 5px;
}

【问题讨论】：

你能展示一下链接标记的样子吗？原始图标来自哪里？
@jerrylow 原始图标来自 FontAwesome 家族。因为我在标记的伪 (:after) 元素中使用了“内容”。它刚刚开始出现在所有超链接图像 (example.com/sub-page"><imgsrc="image.png">) 中。我希望仅为图像删除该图标。
你能删除这些选择器的内容吗
作为comment on that question already notes，您只需将一个类添加到具有图像的锚点，然后使用#myLink a[href^="//"]:not(.hasImage) 来定位它们。
@HereticMonkey 不是这样的。

标签： jquery css

【解决方案1】：

将来你将能够使用:has() 伪类。

:has() CSS 伪类表示一个元素，如果任何作为参数传递的选择器（相对于给定元素的 :scope）匹配至少一个元素。

以下选择器仅匹配直接包含子元素的元素：

a:has(> img)

现在，您必须使用 JavaScript 来执行此操作，例如 jQuery：

$('a').each(function() {
    if ($(this).find('> img').length) {
        // do something...
    }
});

【讨论】：

【解决方案2】：

实际上，我找到了一种使用 jquery 和 CSS 的方法。我在这里发布我的解决方案以防万一，如果有人需要它。我刚刚使用 jquery 在标签中添加了一个类，并将 display:none 添加到伪元素 (:after) 中。见下文：

$('a').has('img').addClass('hyperlinkedimage');

.hyperlinkedimage { display: none; }

【讨论】：