当然可以用纯CSS搞定这个需求，完全不需要JavaScript！

方法一：现代浏览器推荐方案（使用:has()伪类） #

:has()伪类能帮我们精准筛选出不包含<img>子元素的.thirstylink链接，写法简洁又直观：

.thirstylink:not(:has(img)):after {
  content: "*";
  margin-left: 2px; /* 可选：给星号和文本加一点间距，更美观 */
  color: #e74c3c; /* 可选：给星号设置显眼颜色，提醒用户这是联盟链接 */
}

目前Chrome、Firefox、Edge等主流浏览器都支持:has()，如果你的网站访客主要使用现代浏览器，这是最优解。

方法二：兼容旧版浏览器的替代方案 #

如果需要兼容不支持:has()的旧浏览器，可以通过判断链接的子元素类型来实现：

/* 选中直接子节点是纯文本的.thirstylink */
.thirstylink > :only-child:not(img):after,
/* 选中没有子元素（纯文本链接）的.thirstylink */
.thirstylink:empty:after {
  content: "*";
  margin-left: 2px;
}

这个方案针对纯文本/纯图片的两种极端情况设计，也能满足你的需求。

效果验证 #

• 纯文本链接：

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

会渲染为：this is an affiliate link*

• 图片链接：

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

不会添加任何星号样式，完全符合你的要求。

内容的提问来源于stack exchange，提问作者iagdotme