如何在中定位前四个

I Have a simple unordered list containing over 12 li's.

我有一个简单的无序列表,包含超过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>

I want to target the first four li's to change their background, and the last four li's to create a different background. Is there any way to do this only with CSS? I know how to use pseudo classes for targeting the first, or the last li, or every forth element, but what I want is to target all first-four, and last-four elements.

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

3 个解决方案

#1

Use

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

for the first four, and

对于前四个,和

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

for the last four.

为了最后四个。

#2

Using nth-child is the best practice.

使用nth-child是最佳实践。

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

But you won't get full browser compatibility. especially in lower versions of IE If you are using static html, you can create a class and and apply to the first four li

但是你不会获得完全的浏览器兼容性。特别是在较低版本的IE中如果你使用的是静态html,你可以创建一个类并应用于前四个li

eg:

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

#3

You can user nth-child and nth-last-of-type.

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

So the CSS code will be :

所以CSS代码将是:

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

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

#1

Use

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