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's _.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中。

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

2 个答案: