是否有可能使用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>
当前回答
CSS的问题在于伪类的语法。
偶数和奇数伪类应该是:
li:nth-child(even) {
color:green;
}
and
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/
: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>
下面是应用偶数和奇数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>
李:nthn -child(1n)的 李:ntht -child(2n)的 <德> <li>元素1</li> <li>元素2</li> <li> element list 3</li> <li> element列表4</li> < /德>
查看浏览器支持: CSS3:n -child()选择器
css奇数和偶数不支持IE。 推荐您使用以下溶液。
最好的解决办法:
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>
