Arm*_*and 270 html css css-selectors
是否可以在列表项上使用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>
thi*_*dot 597
演示: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>文档:
Kev*_*ney 46
CSS的问题在于伪类的语法.
偶数和奇数伪类应该是:
li:nth-child(even) {
color:green;
}
和
li:nth-child(odd) {
color:red;
}
演示:http://jsfiddle.net/q76qS/5/
小智 18
用这个:
li { color:blue; }
li:nth-child(odd) { color:green; }
li:nth-child(even) { color:red; }
有关浏览器支持的信息,请参阅此处:http: //kimblim.dk/css-tests/selectors/
Min*_*_Bu 12
但它在 IE 中不起作用。
推荐使用
:nth-child(2n+1)
:nth-child(2n+2)
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奇数和偶数不支持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; }
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; }
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 :nth-child() 选择器