Javascript 如何确定CSS中图标的样式？

我有以下代码：

<span class="stars">★★☆☆☆   </span>

这会改变所有星星的颜色。不是空的

.entry-content span .stars{
    color:gray;
}

如何将边框颜色更改为仅空星星（最后3个）？

---

我只想使用CSS，但如果需要JQuery或JavaScript，我会洗耳恭听。（仅供参考，这不是唯一的类。）我想在所有星星为空时将它们作为目标。

您可以使用绝对定位伪元素（

：：before

）对它们进行着色。使用“数据星星”属性更改星星数。使用或添加要着色的星星数：

$（'span'）.attr（'data-stars'，'☆☆☆');
.stars{
位置：相对位置；
}
.星星：：以前{
位置：绝对位置；
右：0；
身高：100%；
颜色：红色；
内容：attr（数据星）；
}

★★☆☆☆恐怕您必须使用额外的类。如下所示：

<span class="stars"><span class=“star-red”>★</span>☆</span>

★☆

然后只需将star-red类添加到css中即可。
您不能。它们都在单个元素中，而不是元素本身。您可以尝试对该
★和此
☆（.replace（））这很有帮助！但是在我的网站上有一个奇怪的重叠效果，即使有1、3、4和5个满星或空星。
<span class="stars"><span class=“star-red”>★</span>☆</span>