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

【问题标题】：How do I target the style of an icon in CSS?如何在 CSS 中定位图标的样式？
【发布时间】：2018-10-22 17:24:47
【问题描述】：

我有以下代码：

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

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

这没有任何作用：

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

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

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

如何将边框颜色更改为仅空星（最后 3 个）？我只想使用 CSS，但如果需要 JQuery 或 JavaScript，那么我会全力以赴。（仅供参考，这不是唯一的课程。）我想在所有星星为空时定位它们。

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

恐怕你必须使用额外的课程。像下面这样：

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

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

【讨论】：