ฉันจะจัดองค์ประกอบที่เป็นคู่และคี่ได้อย่างไร

281

เป็นไปได้ไหมที่จะใช้ CSS pseudo-classes เพื่อเลือกอินสแตนซ์ของรายการคู่และคี่

ฉันคาดว่าสิ่งต่อไปนี้จะสร้างรายการของสีที่สลับกัน แต่ฉันจะได้รับรายการของสีน้ำเงิน:

<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

— อาร์มันด์
แหล่งที่มา

630

ตัวอย่าง: 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 (ใช้ได้เกือบทุกที่)

— thirtydot
แหล่งที่มา

33

อาจจะเป็นเพียงหมายเหตุ: nth-child ไม่รองรับ IE 8 และต่ำกว่า

— MEM

1

คุณสามารถใช้โพลีฟิลSelectivzrหากคุณต้องการรองรับ IE8 ... และ IE6 / 7 เช่นกัน

— Ricardo Zea

2

เพิ่งยืนยันว่าแม้กับ Selectivizr :nth-child(odd/even)จะไม่ทำงานใน IE8

— Ricardo Zea

7

จริงมันไม่ทำงานใน IE8 ตามที่จัดทำเอกสารไว้ที่นี่: caniuse.com/#feat=css-sel3แต่สามารถทำงานกับเบราว์เซอร์หลักๆ

— aaron-coding

1

หลังจากการสนับสนุน IE8 ทั้งหมดไม่มีอะไรต้องกังวลอีกต่อไปในกรณีนี้เนื่องจากพฤติกรรมที่ตั้งใจเป็นเพียง 'สนับสนุน' มันไม่ได้ป้องกันผู้ใช้จากการใช้เว็บไซต์หรือจากการค้นหาข้อมูล มันไม่แม้แต่จะเสียรูปลักษณ์โดยรวมของเว็บไซต์

— Hafenkranich

47

ปัญหาเกี่ยวกับ CSS ของคุณนั้นขึ้นอยู่กับไวยากรณ์ของคลาสหลอกของคุณ

คลาสหลอกคู่และคี่ควรเป็น:

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

และ

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

สาธิต: http://jsfiddle.net/q76qS/5/

— เควินเกอร์นีย์
แหล่งที่มา

18

ใช้สิ่งนี้:

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

ดูที่นี่สำหรับข้อมูลเกี่ยวกับการสนับสนุนเบราว์เซอร์: http://kimblim.dk/css-tests/selectors/

— แดนส
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

ดูการสนับสนุนเบราว์เซอร์ที่นี่: CSS3: nth-child () Selector

— iDaniel88
แหล่งที่มา

1

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>

— Minh_Bu
แหล่งที่มา

0

ด้านล่างเป็นตัวอย่างของสีคู่และสี 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>

— Sheo Dayal Singh
แหล่งที่มา

0

แต่มันไม่ทำงานใน 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>

ขยายตัวอย่างข้อมูล

— Minh_Bu
แหล่งที่มา

0

นี้ที่ n-เด็ก (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>

— Agboola Feyikemi
แหล่งที่มา

-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 Krishnan
แหล่งที่มา

3

นี่เป็นเพียง ... น่ากลัว มีวิธีที่ดีกว่ามากมายในการกำหนดเป้าหมายองค์ประกอบคู่หรือคี่ นอกจากนี้ไม่มีเหตุผลที่จะใช้ JavaScript เช่นนี้เมื่อ CSS สองบรรทัดจะทำสิ่งเดียวกัน

— ดัสติน Halstead