如何选择第一个 在无序列表？ [重复]

Question

这个问题在这里已有答案：

• css selector for first list item 2回答
• CSS selector for first element with class 18个答案

我是编程的初学者。我正试图从头开始构建一个投资组合。在我的导航栏中，我想选择第一个不同颜色的链接。谁能告诉我从无序列表中选择第一个链接的最佳方法？

<ul id="main-nav">
    <li>
      <a href="#" class="nav-links">
        <i class="fas fa-home"></i>Home</a>
    </li>
    <li>
      <a href="#about" class="nav-links"><i class="fas fa-info-circle"></i>About Me</a>
    </li>
    <li>
      <a href="#portfolio" class="nav-links"><i class="fas fa-image"></i>Portfolio</a>
    </li>
    <li>
      <a href="#contact" class="nav-links"><i class="fas fa-envelope"></i>Contact</a>
    </li>
  </ul>

Answer 1

请记住，要重新着色链接，您不仅要选择第一个<li>元素，还要选择其中的<a>（因为链接不会自动继承其父元素的颜色）。

li:first-child a {
  color: red;
}

<ul id="main-nav">
  <li>
    <a href="#" class="nav-links">
      <i class="fas fa-home"></i>Home</a>
  </li>
  <li>
    <a href="#about" class="nav-links"><i class="fas fa-info-circle"></i>About Me</a>
  </li>
  <li>
    <a href="#portfolio" class="nav-links"><i class="fas fa-image"></i>Portfolio</a>
  </li>
  <li>
    <a href="#contact" class="nav-links"><i class="fas fa-envelope"></i>Contact</a>
  </li>
</ul>

Answer 2

CSS：第一个类型的选择器

：first-of-type选择器匹配其父元素的特定类型的第一个子元素。

例：

.myNav {
  width: 200px;
}
ul {
  list-style: none;
}
li {
  padding: 5px;
  border-radius: 6px;
  margin-top: 4px;
}
li:hover {
  background: red;
  color: #fff;
  cursor: pointer;
}
li:first-of-type {
  background: red;
  color: #fff;
}

<div class="myNav">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>