时间戳

首页 > 解决方案 > 使用 CSS 向元素添加内容，除非它是图像

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

问题描述

我正在使用一个添加附属链接的 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>

有没有一种方法可以将星号添加到具有“渴链接”类的链接文本但不能添加到链接图像？这可以用 CSS 完成还是我必须求助于 Javascript？

谢谢！

标签： css

解决方案

现在在 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: "*";
}

Here we use CSS :has pseudo selector

推荐阅读