CSS:n-child方程式

时间:2011-02-28 07:22:21

标签: css css-selectors

我有一个无序列表,每个li组成两列布局中的一个项目:

col1    col2
1       2
3       4
5       6
7       8
9       10
11      12

我需要为每个项目设置交替的背景颜色,但不要让一列中的每个项目都相同。

所以:

1,4,5,8,9,11将有一种颜色;和 2,3,6,7,10,12将有另一种颜色。

这可以通过一个:nth-​​child规则来实现吗?

谢谢!

3 个答案:

答案 0 :(得分:4)

解决!经过一番头疼:

首先,设置标准背景颜色,然后使用4n + 4(每4个项目从第4项开始= 4,8,12等)和4n + 1(每4个项目从1开始= 1,5,9等)。

li {background:#fff;}
li:nth-child(4n+4), li:nth-child(4n+1) {background:#ccc;}

全部谢谢!

答案 1 :(得分:1)

创建4条规则,一条为第一列交替,另一条为第二列交替。反转每列的颜色,所以你有类似的东西:

col1     col2
a        b
b        a
a        b
b        a
a        b
b        a

试试这个:

tr.left:nth-child(even) {background: #CCC}
tr.left:nth-child(odd) {background: #FFF}
tr.right:nth-child(even) {background: #FFF}
tr.right:nth-child(odd) {background: #CCC}

左列中的行包含类left,右列中的行包含类right

答案 2 :(得分:0)

您可以使用“:even”和“:odd”类型来获取此内容。

$('ul li:even').css('background-color','color');

$('ul li:odd').css('background-color','color');

你只能为一个“li”生孩子。请尝试以上。