Çift ve tek elemanları nasıl şekillendirebilirim?

281

Liste öğelerinin çift ve tek örneklerini seçmek için CSS sözde sınıflarını kullanmak mümkün müdür?

Aşağıdakilerin alternatif renklerin bir listesini üretmesini beklerdim, ancak bunun yerine mavi öğelerin bir listesini alırım:

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

630

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>

Snippet'i genişlet

Belgeler:

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
http://caniuse.com/css-sel3 (neredeyse her yerde çalışır)

— thirtydot
kaynak

33

Belki bir not: nth-child IE 8 ve altı tarafından desteklenmez.

— MEM

1

IE8 ... ve IE6 / 7'yi de desteklemeniz gerekiyorsa Selectivzr çoklu dolgusunu kullanabilirsiniz .

— Ricardo Zea

2

Sadece Selectivizr ile bile :nth-child(odd/even)IE8'de çalışmadığını doğruladı .

— Ricardo Zea

7

Doğru, burada belgelendiği gibi IE8'de çalışmaz : caniuse.com/#feat=css-sel3 ancak her büyük tarayıcıda çalışır .

— aaron-kodlama

1

Sonuçta, bu durumda amaçlanan davranış sadece 'destekleyici' olduğundan IE8 Desteği artık endişelenecek bir şey değildir. Kullanıcının siteyi kullanmasını veya bilgi bulmasını engellemez. Web sitesinin genel görünümünü bile bozmaz (büyük olasılıkla değil).

— Hafenkranich

47

CSS'nizle ilgili sorun, sahte sınıflarınızın sözdiziminde yatmaktadır.

Çift ve tek sözde sınıflar şöyle olmalıdır:

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

ve

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

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

— Kevin Gurney
kaynak

18

Bunu kullan:

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

Tarayıcı desteği hakkında bilgi için buraya bakın: http://kimblim.dk/css-tests/selectors/

— Dan S
kaynak

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>

Snippet'i genişlet

Tarayıcı desteğine buradan bakın: CSS3: nth-child () Seçici

— iDaniel88
kaynak

1

css tek ve hatta IE için destek değil. aşağıdaki çözümü kullanmanızı öneririz.

En iyi çözüm:

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
kaynak

0

Aşağıda eşit ve tek css renk örneği örneği

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

0

ancak IE'de çalışmıyor. kullanmanızı öneririz: 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>

Snippet'i genişlet

— Minh_Bu
kaynak

0

Nth-child (n) seçici, üst öğe türünden bağımsız olarak n'inci alt öğe olan her öğeyle eşleşir. Tek ve çift, dizini tek veya çift olan alt öğeleri eşleştirmek için kullanılabilen anahtar kelimelerdir (ilk çocuğun dizini 1'dir).

Senin istediğin bu:

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

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

3

Bu sadece ... Korkunç. Çift / tek öğeleri hedeflemenin daha iyi yolları vardır. Ayrıca, iki CSS satırı aynı şeyi başarabildiğinde JavaScript'i kullanmak için hiçbir neden yoktur.

— Dustin Halstead