css - 如何通过 CSS 仅向列表的某些元素添加样式

Question

假设我有这个列表:

<nav>
  <ul class="the_list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

如何在不使用 JQuery 而仅使用 CSS 的情况下仅将样式(例如底部边框)应用于 ul 的前两个子级？

Answer 1

你可以这样写，

.the_list li:nth-child(1),
.the_list li:nth-child(2) {
    border-bottom: 1px solid tomato;
}

所以上面的选择器将选择 the_list 的 class 的 ul 元素的第一个和第二个子元素

Demo

---

如果你想支持像IE8这样的老式浏览器，你也可以这样做

.the_list li:first-child,
.the_list li:first-child + li {
    border-bottom: 1px solid tomato;
}

Demo 2

因此在第二个选择器中，我们首先选择嵌套在 ul 下的第一个 li 元素，其 class 为 the_list 然后我们选择与第一个 child 相邻的 li。