我有一个无序列表,每个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规则来实现吗?
谢谢!
答案 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”生孩子。请尝试以上。