如何在<ul>中定位前四个<li>

Question

我有一个简单的无序列表,包含超过12个li.

<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

我想针对前四个li来改变他们的背景,最后四个li来创建一个不同的背景.有没有办法只用CSS做到这一点？我知道如何使用伪类来定位第一个,最后一个li或每个第四个元素,但我想要的是定位所有前四个和后四个元素.

Answer 1

使用

ul li:nth-child(-n+4)

对于前四个,和

ul li:nth-last-child(-n+4)

最后四个.