在CSS3中使用nth-child（）选择double [英] Select doubles using nth-child() in CSS3

问题描述

说明我有以下结构的列表：

Say I have the following structure for a list:

<ul>
    <li></li><li></li>
    <li></li><li></li>
</ul>

，每个< li> ％width，所以我想让每两个有相同的背景颜色，像这样：

and each <li> is 50% width so I want every two to have the same background colour like this:

<ul>
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li>
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li>
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li>
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li>
</ul>

我可以使用'nth-child（）'CSS选择器，最小化代码？

Can I do this using the 'nth-child()' CSS selector so as to minimise code?

推荐答案

ul li:nth-child(4n+1),
ul li:nth-child(4n+2) {
  background: #CCC;
}
ul li:nth-child(4n+3),
ul li:nth-child(4n+4) {
  background: #DDD;
}

这将给出从第1开始的第4个元素， #CCC和每第4个元素从第3和第4开始为#DDD

This will give you every 4th element starting with the 1st, and 2nd as color #CCC and every 4th element starting with the 3rd and 4th as #DDD

jsfiddle这里： http://jsfiddle.net/mU2tn/1/

jsfiddle here: http://jsfiddle.net/mU2tn/1/

这篇关于在CSS3中使用nth-child（）选择double的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！