对列表项使用CSS：even和：odd伪类
有没有可能在列表项上使用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> 演示： 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>
你的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/
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>
<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>
