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

是否有可能使用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>

当前回答

但是它在IE中不起作用。

推荐使用 2: nth-child (n + 1) : nth-child (n + 2)

李{ 颜色:黑; 的李:nth-child(奇怪){ 颜色:# 777; 的李:nth-child(甚至){ 颜色:蓝色; 的 <德> < li > ho < / li > < li > ho < / li > < li > ho < / li > < li > ho < / li > < li > ho < / li > < /德>

2018-12-26 07:11:07

其他回答

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

文档:

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child http://caniuse.com/css-sel3(它几乎适用于所有地方)

2011-02-22 16:18:52

李:nthn -child(1n)的李:ntht -child(2n)的 <德> <li>元素1</li> <li>元素2</li> <li> element list 3</li> <li> element列表4</li> < /德>

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

2016-03-15 07:57:14

用这个:

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

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

2011-02-22 16:17:33

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

偶数和奇数伪类应该是:

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

and

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

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

2011-02-22 16:15:40

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>

2018-12-26 07:06:40

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

推荐文章

最新文章

标签