如何选择无序列表中的第一个 <li>？ [复制]答案

【问题标题】：How to select the first <li> in an unordered list? [duplicate]如何选择无序列表中的第一个 <li>？ [复制]
【发布时间】：2019-02-18 07:42:53
【问题描述】：

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

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

【问题讨论】：

li:first-child?
我知道你说你是一个初学者，但你需要学会正确使用这个网站。包括检查现有答案。

标签： html css

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

【讨论】：

它们会自动继承颜色但它们可能具有由另一种样式或浏览器定义的默认颜色.. 并且选择 a 在所有情况下都不会改变颜色，它只会如果没有更具体的规则，这
@TemaniAfif W3C spec for HTML5 default styles 指定了链接颜色，因此没有任何现代浏览器在其中a 链接将自动继承其父链接的颜色而无需附加规则（如a { color: inherit }） .
它们将始终继承，但该规则将覆盖 .. 说它们不会继承是错误的。他们将但我们需要考虑应用的默认规则......如果您检查开发工具中的计算选项卡，您将看到颜色被继承然后被覆盖但默认样式。颜色总是被继承的，但当然我们需要检查其他规则来决定要使用的颜色
@TemaniAfif 我不明白说链接不会自动继承其父级的颜色是多么错误。由于 W3C 规范中的默认浏览器样式，没有现代浏览器可以仅通过定位其父级来更改链接的颜色。我说的是有助于编写有效的 CSS 的实用术语，而您正在争论语义并提出一个有争议的观点。

【解决方案2】：

CSS :first-of-type Selector

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

【讨论】：