Using CSS :even and :odd pseudo-classes with list

2018-12-31 19:21发布

站内文章 / HTML/CSS
47 0 0

问题:

Is it possible to use CSS pseudo-classes on list items?

I\'d expect the following to produce a list of alternating colors, but instead I get a list of blue items:

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

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

Documentation:

  • https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
  • http://caniuse.com/css-sel3 (it works almost everywhere)


回答2:

The problem with your CSS lies with the syntax of your pseudo-classes.

The even and odd pseudo-classes should be:

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

and

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

Demo: http://jsfiddle.net/q76qS/5/



回答3:

Use this:

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

See here for info on browser support: 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>

See browser support here : CSS3 :nth-child() Selector



回答5:

but it\'s not working in IE. recommend using :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>



回答6:

Best solution:

li:nth-child(2n+1) { color:green; }
li:nth-child(2n+2) { 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>


回答7:

Below is the example of even and odd css color apply

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

 <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\",
            });

            }

        });


标签： html css css-selectors
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~