如何通过 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>

如何仅将样式（例如底部边框）应用于 ul 的前两个子级，而不使用 JQuery，仅 CSS？

Answer 1

你可以这样写，

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

所以上面的 select 或者将 select 你的 ul 元素的第一个和第二个 child 与 the_list 的 class ]

Demo

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

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

Demo 2

所以在第二个 select 中，我们首先 select 嵌套在 ul 下的第一个 li 元素 class the_list 然后我们 select 与第一个 child 相邻 li。

Answer 2

你可以用一个 select 或者 ...

li:nth-of-type(-n+2){
    border-bottom: 1px solid red;
}

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

... 这将 select 前两个列表项 - 这种方法比使用多个 select 或更好，因为列表可能会变得很长。

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

How to add a style only to certain elements of a list via CSS

css

css-selectors