如何在 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( 在它们上着色。使用数据星属性更改星数。使用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 中即可。