外部链接 css：文本链接与 img 链接答案

【问题标题】：external links css: text links vs img links外部链接 css：文本链接与 img 链接
【发布时间】：2023-03-12 06:09:01
【问题描述】：

我有 :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 的样式以删除：所有链接的内容之后并在悬停时为所有链接添加阴影图片。但这是嵌套不必要的 div，而且这意味着在此类 div 之外没有图像链接......

【问题讨论】：

标签： css

【解决方案1】：

:empty 将检查其中的 any 内容，包括文本，因此除非他的链接之一完全为空（没有文本，没有子项），否则这将不起作用。如果您能提供一个带和不带图像的代码示例，那就太好了。

如果您将<img> 嵌套在其中，则当您有一个包含图像的链接时，无需嵌套 div 的替代方法是简单地添加一个类。然后简单地设置不同的样式。

【讨论】：

对不起，没想到给出文本/图片链接的例子。文字链接是：google.com">google.com</a> 图片链接是：google.com"><imgsrc="myimage.jpg" />
不幸的是，除了 :empty 来检查元素内部的内容之外，css 没有任何选择器，然后返回以选择外部的内容，因此您最简单的选择是在图像链接中添加一个类（我想它必须少用，所以继续添加类更容易，但无论哪种方式都有效）。您可以手动执行此操作，也可以使用 js 自动检查链接中是否有图像，如果有则添加一个类。两者都是有效的选择，我会说你应该考虑最适合你的情况。
非常感谢，我会加课的。其中大部分是 php 生成的，少数丢失的我可以手动完成。