Làm thế nào tôi có thể phong cách các yếu tố chẵn và lẻ?

281

Có thể sử dụng các lớp giả CSS để chọn các thể hiện chẵn và lẻ của các mục danh sách không?

Tôi mong muốn những điều sau đây sẽ tạo ra một danh sách các màu xen kẽ, nhưng thay vào đó tôi nhận được một danh sách các mục màu xanh:

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

html css css-selectors

— Armand
nguồn

630

Bản trình diễn: http://jsfiddle.net/thundreddot/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>

Mở rộng đoạn trích

Tài liệu:

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
http://caniuse.com/css-sel3 (nó hoạt động ở hầu hết mọi nơi)

— ba mươi
nguồn

33

Có lẽ chỉ là một lưu ý: nth-child không được IE 8 hỗ trợ trở xuống.

— MEM

1

Bạn có thể sử dụng Selectivzr polyfill nếu bạn cần hỗ trợ IE8 ... và IE6 / 7 là tốt.

— Ricardo Zea

2

Chỉ cần xác nhận rằng ngay cả với Selectivizr :nth-child(odd/even)không hoạt động trong IE8.

— Ricardo Zea

7

Đúng, nó không hoạt động trong IE8 như được ghi lại ở đây: caniuse.com/#feat=css-sel3 nhưng nó hoạt động trên mọi trình duyệt chính .

— mã hóa aaron

1

Sau tất cả Hỗ trợ IE8 không còn gì phải lo lắng nữa trong trường hợp này vì hành vi dự định chỉ là 'hỗ trợ'. Nó không ngăn người dùng sử dụng trang web cũng như tìm kiếm thông tin. Nó thậm chí không (rất có thể không) làm hỏng sự xuất hiện chung của trang web.

— Hafenkranich

47

Vấn đề với CSS của bạn nằm ở cú pháp của các lớp giả.

Các lớp giả chẵn và lẻ nên là:

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

và

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

Bản trình diễn: http://jsfiddle.net/q76qS/5/

— Kevin Gurney
nguồn

18

Dùng cái này:

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

Xem tại đây để biết thông tin về hỗ trợ trình duyệt: http://kimblim.dk/css-tests/selector/

— Dân S
nguồn

3

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>

Mở rộng đoạn trích

Xem hỗ trợ trình duyệt tại đây: CSS3: nth-child () Selector

— iDaniel88
nguồn

1

css lẻ và thậm chí không hỗ trợ cho IE. khuyên bạn nên sử dụng giải pháp dưới đây.

Giải pháp tốt nhất:

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>

— Minh_Bu
nguồn

0

Dưới đây là ví dụ về màu css chẵn và lẻ áp dụng

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

— Sheo Dayal Singh
nguồn

0

nhưng nó không hoạt động trong IE. khuyên dùng: 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>

Mở rộng đoạn trích

— Minh_Bu
nguồn

0

Bộ chọn: nth-child (n) khớp với mọi phần tử là con thứ n, bất kể loại nào, của cha mẹ của nó. Chẵn và lẻ là những từ khóa có thể được sử dụng để khớp với các phần tử con có chỉ số là số lẻ hoặc số chẵn (chỉ số của con đầu tiên là 1).

Đây là cái bạn muốn:

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

— Agboola Feyikemi
nguồn

-5

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

            }

        });

— Ashwin Vinod KRGAN
nguồn

3

Đây chỉ là ... Kinh khủng. Có rất nhiều cách tốt hơn để nhắm mục tiêu các yếu tố chẵn / lẻ. Hơn nữa, không có lý do để sử dụng JavaScript như thế này khi hai dòng CSS sẽ hoàn thành cùng một thứ.

— Dustin Halstead