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

问题描述

我有一个问题，我只想更改一个图标的颜色，但我不能放置其他类，因为 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>

解决方法

我不明白你为什么不能添加另一个 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>

,

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

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

  <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>