如何设置偶数和奇数元素的样式？

Posted

技术标签:

【中文标题】如何设置偶数和奇数元素的样式？【英文标题】：How can I style even and odd elements? 【发布时间】：2011-07-02 03:06:13 【问题描述】：

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

【问题讨论】：

【参考方案1】：

演示：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>

文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child http://caniuse.com/css-sel3（它几乎可以在任何地方使用）

【讨论】：

请注意：IE 8 及以下版本不支持 nth-child。 如果您还需要支持 IE8... 和 IE6/7，可以使用 Selectivzr polyfill。 刚刚确认即使使用 Selectivizr :nth-child(odd/even) 在 IE8 中也不起作用。 没错，它在 IE8 中不起作用，如下所述：caniuse.com/#feat=css-sel3 但它确实适用于每个主要浏览器。 毕竟 IE8 支持在这种情况下不再需要担心，因为预期的行为只是“支持”。它不会阻止用户使用网站或查找信息。它甚至不会（很可能不会）破坏网站的整体外观。【参考方案2】：

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

偶数和奇数伪类应该是：

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

和

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

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

【讨论】：

【参考方案3】：

使用这个：

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

有关浏览器支持的信息，请参见此处： http://kimblim.dk/css-tests/selectors/

【讨论】：

【参考方案4】： 

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() Selector

【讨论】：

【参考方案5】：

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>

【讨论】：

【参考方案6】：

但它在 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>

【讨论】：

【参考方案7】：

以下是偶数和奇数 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>

【讨论】：

【参考方案8】：

:nth-child(n) 选择器匹配其父元素的第 n 个子元素，无论其类型如何。 奇偶是关键字，可用于匹配索引为奇数或偶数的子元素（第一个子元素的索引为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>

【讨论】：

【参考方案9】： 
 <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 完成相同的事情时，没有理由像这样使用 JavaScript。

以上是关于如何设置偶数和奇数元素的样式？的主要内容，如果未能解决你的问题，请参考以下文章

为table的奇数行和偶数行设置样式

用JS文件如何设置奇数表格行背景和偶数表格行背景

浏览器里怎么打印奇数页和偶数页？

奇数偶数排序技巧分析

如何隔行设置单元格填充色，如奇数列为红色，偶数列为绿色，请高手指教！

c#里wpf下怎么设置dataGrid的奇数行和偶数行各为一种颜色？比如this.dataGrid.后面加啥属性进行设置？