外部链接css：文本链接vs img链接

Question

我有外部链接的:after内容，以便在wiki上显示箭头图标。

a[href^="https://"]
:not([href*="mysite.com"])
:after{
content: "  "   url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}

但是，我也有链接是图像，而不是文本。对于那些我不想要:after内容的人，我想要悬停阴影，但我无法弄清楚如何去做。

这些图像链接中的大多数都堆叠在一起，没有文本链接，也没有非链接图像混合在一起，所以我可以将它们包装在div中并设置这些div的样式以便删除：在所有链接的内容之后并为所有链接添加阴影图片。但是那个不必要的divs嵌套了，加上它就意味着这些div之外没有图像链接......

Answer 1

如果您假设带有文本的锚元素不具有子元素，则与具有图像的元素不同，那么您可以使用css empty selector：

a[href^="https://"]:not([href*="mysite.com"]):empty:after{
    content: "  " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}    

Answer 2

：空将检查内部的任何内容，包括文字，这样除非他的一个链接完全为空（没有文字，没有孩子），否则无效。如果您可以提供带有和不带图像的代码示例，那将是很好的。

如果您将<img>嵌套在其中，则在没有嵌套div的替代方法是在您拥有包含图像的链接时添加一个类。然后简单地改变风格。