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的情况下，仅将样式，底部边框应用于ul的前两个子节点，仅使用CSS？

Answer 1

您可以写一些类似的内容，

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

因此，上面的选择器将使用ul class

选择the_list元素的第一个和第二个子元素

Demo

如果您想支持IE8等老式浏览器，您还可以执行类似

的操作

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

Demo 2

所以在第二个选择器中，我们首先选择嵌套在li ul class the_list li下的第一个{{1}}元素，然后我们选择相邻{{1}第一个孩子。

Answer 2

您可以使用一个选择器...

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>

...将选择前两个列表项 - 这种方法比使用多个选择器更好，因为列表可能会变得非常长。

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

2 个答案: