我可以为图标制作很多课程吗答案

【问题标题】：Can I make many class for icon我可以为图标制作很多课程吗
【发布时间】：2021-04-18 22:44:32
【问题描述】：

我有一个问题，我只想更改一个图标的颜色，但我不能放置其他类，因为 icon font-awasome 有一个类。我放了它们，但它不起作用。我想更改最后一个图标（颜色）。你能帮帮我吗？

<div class="text">
              <h4>Los Angeles</h4>
              <p class="price">Nuit à partir de <strong>25€</strong></p>CC
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>

【问题讨论】：

感谢您的帮助。
我认为你只需要定位最后一个孩子，也就是最后一个图标，.fas.fa-star:last-child { color: }。

标签： css html5-canvas icons favicon

【解决方案1】：

我不明白为什么你不能添加另一个 CSS 类，我看不出有什么理由不这样做。

但无论如何其他选项是：

使用内联样式标签：

<i class="fas fa-star" style="color: red;"></i>

或者如果你知道位置，你知道它总是第三个元素，你可以使用:nth-child()。这个例子将改变第三个图标的颜色

.text i:nth-child(3) {
  color: red;
}

片段：

.text .fas.fa-star {
  color: black;
}

.text .fas.fa-star:nth-child(3) {
  color: red;
}

<div class="text">
  <span class="fas fa-star">1</span>
  <span class="fas fa-star">2</span>
  <span class="fas fa-star">3</span>
  <span class="fas fa-star">4</span>
  <span class="fas fa-star">5</span>
</div>

【讨论】：

【解决方案2】：

我试过了，但问题是我有一个部分的文章包含相同的成分，我想用 css3 选择图标。

是的，它非常适合直接在 html 上进行样式设置，谢谢。我只想在 css 部分做我所有的样式。第一篇文章示例我想选择 2last 图标，但第二篇文章只是最后一个图标我可以将 div 与类放在一起？

  <article>
          <a href="#">
            <div>
              <img
                class="image"
                src="Public/Images/hebergements/4_small/HotelLesmouettes.jpg"
                alt="Hôtel les mouettes"
              />
             
            </div>

            <div class="text">
              <h4>Hôtel Les mouettes</h4>
              <p class="price">Nuit à partir de 76<strong>€</strong></p>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
          </a>
        </article>
      </div>
     

      <div class="Lodging-article">
        <article>
          <a href="#"
            >
            <div>
              <img
                class="image"
                src="Public/Images/hebergements/4_small/Hoteldelamer.jpg"
                alt="Hôtel de la mer"
              />
            </div>

            <div class="text">
              <h4>Hôtel de la mer</h4>
              <p class="price">Nuit à partir de 46<strong>€</strong></p>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
             <i class="fas fa-star" ></i>
            </div>
          
          </a>
        </article>

【讨论】：