Как мне настроить стиль иконки в 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

Боюсь, вы должны использовать дополнительные классы.Например:

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

А затем просто добавьте класс звезды и красного к вашему CSS.

Answer 2

Вы можете закрасить их, используя псевдоэлемент с абсолютным позиционированием (::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>