2

我有一个包含超过 12 里的简单无序列表。

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

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

4

3 回答 3

6

利用

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

前四个，和

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

最后四个。

于 2013-05-31T09:15:19.737 回答
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>
于 2013-05-31T09:33:57.703 回答
1

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

所以CSS代码将是：

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

ul li:nth-last-of-type(-n+4) {
    background: blue;
}
于 2014-01-14T10:32:01.160 回答