Wybierz podwaja korzystania nth-child() w CSS3

Say I mieć następującą strukturę dla listy:Wybierz podwaja korzystania nth-child() w CSS3

<ul> 
    <li></li><li></li> 
    <li></li><li></li> 
</ul>

i każdy <li> wynosi 50% szerokości więc chcę każde dwa mają ten sam kolor tła jak to :

<ul> 
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li> 
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li> 
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li> 
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li> 
</ul>

Czy mogę to zrobić za pomocą "nth-child() selektora CSS, tak aby zminimalizować kod?

Źródło

2012-03-28 Dan

Dlaczego nie używać tabeli, ponieważ wygląda na to, że tak właśnie postępujesz? – jzworkman

Nie są one w rzeczywistości 50%, ale ustawione szerokości, tylko po to, aby ustawić scenę. Tabele są brzydkie, wolę projektowanie bez stołów. – Dan

Jednak Twoja lista będzie wyglądać jak stół, gdy masz zmienne kolory, po prostu wydaje się zaprzeczać twojemu projektowi bez stołów, kiedy twoja implementacja i tak sprawi, że będzie wyglądać jak stół. – jzworkman

ul li:nth-child(4n+1), 
ul li:nth-child(4n+2) { 
    background: #CCC; 
} 
ul li:nth-child(4n+3), 
ul li:nth-child(4n+4) { 
    background: #DDD; 
}

To daje co 4 elementów, począwszy od dnia 1 i 2 miejsce jako kolor #CCC i każdego elementu 4 wychodząc z 3 i 4 jako #DDD

jsfiddle tutaj: http://jsfiddle.net/mU2tn/1/

Źródło

2012-03-28 17:45:57 jzworkman

Idealnie! Może ustawić domyślny li jako jeden kolor, a następnie zmienić tylko 3 i 4, więc jeszcze mniej css :) – Dan

Cieszę się, że mogę pomóc. – jzworkman

Zaktualizowane skrzypce, więc pływające elementy 'li': http://jsfiddle.net/BoltClock/mU2tn/2 – BoltClock

li{ 
    /* All LIs*/ 
} 
li:nth-child(4n+1), 
li:nth-child(4n+2) { 
    /* Li 1, 2, 
     5, 6, 
     9, 10 */ 
}

Źródło

2012-03-28 17:45:52 YMMD

Tak, możesz to zrobić tylko z CSS (3). Oto jsFiddle example.

li { 
    width:100%; 
} 
li:nth-child(4n) { 
    background:#999; 
} 
li:nth-child(4n-1) { 
    background:#999; 
} 
li:nth-child(4n-2) { 
    background:#ccc; 
} 
li:nth-child(4n-3) { 
    background:#ccc; 
}

Źródło

2012-03-28 17:46:37 j08691

wierzę to CSS powinien dostać to, co ma na celu zrobić.

ul li:nth-child(4n+1), ul li:nth-child(4n+2) { 
    background: #ccc; 
} 

ul li:nth-child(4n+3), ul li:nth-child(4n){ 
    background: #ddd; 
}

Ten JSFiddle pokazuje go w akcji. http://jsfiddle.net/u2W84/

Źródło

2012-03-28 17:47:09 dangerChihuahua007

Być może wszystkie inne odpowiedzi pracować, ale to, co zrobię:

ul li { 
    background: red; 
} 

ul li:nth-child(odd), 
ul li:nth-child(odd) + li { 
    background: green; 
}

Edit: no przepraszam, że nie działa: P Gimme sec.

Źródło

2012-03-28 17:49:10 powerbuoy

To zasadniczo działa identycznie jak "ul li: nth-child (nieparzysty), ul li: nth-child (even)", który wybiera wszystkie z nich i całkowicie przesłania 'ul li'. – BoltClock

Masz rację, początkowo nie zdawałem sobie sprawy, że ': nth-child (odd) + li' wpływa na elementy _all_' li' po dziwnym, nie tylko pierwszym. – powerbuoy

Lub raczej wpływa na element 'li' po * wszystkich nieparzystych *. Selektor, który przyjmuje wszystkie elementy przychodzące po drugim, to '~'. – BoltClock

Wybierz podwaja korzystania nth-child() w CSS3

Odpowiedz

Powiązane problemy