我如何设计偶数和奇数元素?

是否有可能使用CSS伪类来选择列表项的偶数和奇数实例?

我希望下面会产生一个交替颜色的列表，但我得到的却是一个蓝色项目的列表:

<html>
<head>
<style>
li { color: blue }
li:odd { color:green }
li:even { color:red }
</style>
</head>
<body>
<ul>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
</ul>
</body>
</html>
544884 次浏览
小开

CSS的问题在于伪类的语法。

偶数和奇数伪类应该是:

li:nth-child(even) {
color:green;
}

而且

li:nth-child(odd) {
color:red;
}

演示:http://jsfiddle.net/q76qS/5/

小开

用这个:

li { color:blue; }
li:nth-child(odd) { color:green; }
li:nth-child(even) { color:red; }

查看这里关于浏览器支持的信息: http://kimblim.dk/css-tests/selectors/ < / p >

小开
最佳答案

演示:http://jsfiddle.net/thirtydot/K3TuN/1323/

. 
li {
color: black;
}
li:nth-child(odd) {
color: #777;
}
li:nth-child(even) {
color: blue;
}
<ul>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
</ul>

文档:

  • < a href = " https://developer.mozilla.org/en-US/docs/Web/CSS/ nth-child”> https://developer.mozilla.org/en-US/docs/Web/CSS/ nth-child < / >
  • http://caniuse.com/css-sel3(它几乎在任何地方都适用)
小开

. 
li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }
<ul>
<li>list element 1</li>
<li>list element 2</li>
<li>list element 3</li>
<li>list element 4</li>
</ul>

查看浏览器支持: CSS3:n -child()选择器 < / p >

小开 
 <ul class="names" id="names_list">
<a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="1">Ashwin Nair</li></a>
<a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="2">Anil Reddy</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="3">Chirag</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="4">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="15">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="16">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="17">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="18">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="19">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="188">Anil Reddy</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="111">Bhavesh</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="122">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="133">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="144">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="199">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="156">Ashwin</li></a>
<a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="174">Ashwin</li></a>


</ul>
$(document).ready(function(){
var a=0;
var ac;
var ac2;
$(".names li").click(function(){
var b=0;
if(a==0)
{
var accc="#"+ac2;
if(ac=='part2')
{
$(accc).css({


"background": "#322f28",
"color":"#fff",
});
}
if(ac=='part1')
{


$(accc).css({


"background": "#3e3b34",
"color":"#fff",
});
}


$(this).css({
"background":"#d3b730",
"color":"#000",
});
ac=$(this).attr('class');
ac2=$(this).attr('id');
a=1;
}
else{


var accc="#"+ac2;
//alert(accc);
if(ac=='part2')
{
$(accc).css({


"background": "#322f28",
"color":"#fff",
});
}
if(ac=='part1')
{


$(accc).css({


"background": "#3e3b34",
"color":"#fff",
});
}


a=0;
ac=$(this).attr('class');
ac2=$(this).attr('id');
$(this).css({
"background":"#d3b730",
"color":"#000",
});


}


});
小开

下面是应用偶数和奇数css颜色的例子

<html>
<head>
<style>
p:nth-child(even) {
background: red;
}
p:nth-child(odd) {
background: green;
}
</style>
</head>
<body>


<p>The first Odd.</p>
<p>The second Even.</p>
<p>The third Odd.</p>
<p>The fourth Even.</p>




</body>
</html>
小开

的css奇数和偶数是不支持IE。 推荐您使用以下溶液。< / p >

最好的解决办法:

li:nth-child(2n+1) { color:green; } // for odd
li:nth-child(2n+2) { color:red; } // for even


li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }

<ul>
<li>list element 1</li>
<li>list element 2</li>
<li>list element 3</li>
<li>list element 4</li>
</ul>
小开

但是它在IE中不起作用。

< p >推荐使用 :nth-child(2n+1) :nth-child(2n+2) < / p > 

li {
color: black;
}
li:nth-child(odd) {
color: #777;
}
li:nth-child(even) {
color: blue;
}
<ul>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
</ul>

小开
:n -child(n)选择器匹配父元素的第n个子元素，无论其类型如何。 Odd和even是关键字，可以用来匹配索引为奇数或偶数的子元素(第一个子元素的索引为1)

这是你想要的:

<html>
<head>
<style>
li { color: blue }<br>
li:nth-child(even) { color:red }
li:nth-child(odd) { color:green}
</style>
</head>
<body>
<ul>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
<li>ho</li>
</ul>
</body>
</html>

提交答案