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)

最后四个。

Answer 2

使用nth-child是最佳做法。

li:nth-child(-n+4) {
   background-color:gren;   
}

但无法获得完整的浏览器兼容性。，尤其是在较低版本的 IE 中如果您使用的是静态html，则可以创建一个类并应用于前四个li

例如：

.special{
    background-color:gren;
    }


<ul>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><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>

Answer 3

您可以使用 nth-child 和 n-last-of-type 。

所以CSS代码将是：

ul li:nth-child(-n+4) {
    background: red;
}

ul li:nth-last-of-type(-n+4) {
    background: blue;
}

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

3 个答案: