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

Question

我有以下代码:

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

我想瞄准空心星星以呈现不同的颜色。但是，我不知道如何定位。

这没有做任何事情:

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

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

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

如何将边框颜色更改为只有空星星(最后 3 个)？ 我只想使用 CSS，但如果需要 JQuery 或 JavaScript，那么我洗耳恭听。 (仅供引用，这不是唯一的类(class)。)我想在所有星星为空时定位所有星星。

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>