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

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

当前回答

李: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

其他回答

李: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

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

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

文档:

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

2011-02-22 16:18:52

但是它在IE中不起作用。

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

2018-12-26 07:11:07

下面是应用偶数和奇数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>

2017-06-25 16:57:48

用这个:

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

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

推荐文章

最新文章

标签