如何定位CSS中图标的样式？

Question

我有以下代码：

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

我想针对空星星采取不同的颜色。 但是，我不知道如何针对这一目标。

这没有做任何事情：

.glyphicon-glyphicon-star-empty{
    color: gray !important;
}

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

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

如何将边框颜色更改为仅空白星（最后3个）？ 我想只使用CSS，但如果有必要使用JQuery或JavaScript，那么我全都听见了。 （仅供参考，这不是唯一的课程。）我想在空的时候瞄准所有的星星。

Answer 1

您可以使用绝对定位的伪元素（ ::before ）为它们着色。 使用data-stars属性更改星数。 使用jQuery的_.attr()或Element.setAttribute()添加要着色的星星数量：

 $('span').attr('data-stars', '☆☆☆'); 

 .stars { position: relative; } .stars::before { position: absolute; right: 0; height: 100%; color: red; content: attr(data-stars); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="stars">★★☆☆☆</span> 

Answer 2

我担心你必须使用额外的课程。 如下：

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

然后只需将星红色类添加到您的CSS中。