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

所以上面的选择会选择第一个和你的第二个孩子ul元素与class的the_list

演示

如果你想支持像IE8这样的老式浏览器,你也可以做类似的事情

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

演示2

所以,在这里的第二选择,我们首先选择的第一li下嵌套元素ul用class的the_list,然后我们选择相邻的li第一个孩子.