使用CSS向元素添加内容，除非它是图像

Question

我正在使用添加联盟链接的WordPress插件。它的类名为'thirstylink'。

由于我希望突出显示会员链接，我添加了以下CSS以在每个会员链接后添加星号：

.thirstylink:after {
    content: "*";
}

这样的样式很好地与最后的星号链接：

<a href="#test" class="thirstylink">this is an affiliate link</a>

但是，我不希望链接图像像这样设置样式。例如......

<a href="#test" class="thirstylink"><img src="#imageofproduct"></a>

有没有办法可以将星号添加到链接文本和“thirstylink”类，但不能添加到链接图像？这可以用CSS完成，还是我必须使用Javascript？

谢谢！

Answer 1

现在不可能在CSS中了。但你可以使用jquery。

解决方案1：

$(document).ready(function(){
    $(".thirstylink:not(:has(img))").addClass('thirstylink-without-img');
});

和CSS

.thirstylink-without-img:after {
    content: "*";
}

解决方案2：

此解决方案面向未来。它现在不工作了。但你可以在将来使用它

.thirstylink:not(:has(> img)):after {
  content: "*";
} 

这里我们使用CSS :has伪选择器