Alternatywne kolory tła dla elementów listy

Question

Mam listę, a każdy element jest połączony, czy istnieje sposób na zmianę kolorów tła dla każdego elementu?

<ul> 
    <li><a href="link">Link 1</a></li> 
    <li><a href="link">Link 2</a></li> 
    <li><a href="link">Link 3</a></li> 
    <li><a href="link">Link 4</a></li> 
    <li><a href="link">Link 5</a></li> 
</ul> 

Answer 1

Co powiesz na piękne CSS3?

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

Answer 2

można by kodować sekwencję, tak:

li, li + li + li, li + li + li + li + li { 
    background-color: black; 
} 

li + li, li + li + li + li { 
    background-color: white; 
} 

Answer 3

Można to osiągnąć poprzez dodanie klas stylu zmiennego do każdego elementu listy

<ul> 
    <li class="odd"><a href="link">Link 1</a></li> 
    <li><a href="link">Link 2</a></li> 
    <li class="odd"><a href="link">Link 2</a></li> 
    <li><a href="link">Link 2</a></li> 
</ul> 

A potem stylizacji to jak

li { backgorund:white; } 
li.odd { background:silver; } 

można dodatkowo zautomatyzować ten proces z javascript jQuery (przykład poniżej)

$(document).ready(function() { 
    $('table tbody tr:odd').addClass('odd'); 
}); 

Answer 4

Ponieważ przy użyciu standardowego HTML trzeba będzie zdefiniować oddzielną klasę dla i ręczne ustawienie wiersze do klas.

Answer 5

Można to zrobić, określając naprzemiennie nazwy klas w wierszach. Wolę za pomocą row0 i row1, co oznacza, że ​​można łatwo dodać je, gdy lista jest budowany programowo:

for ($i = 0; $i < 10; ++$i) { 
    echo '<tr class="row' . ($i % 2) . '">...</tr>'; 
} 

Innym sposobem byłoby wykorzystanie JavaScript. jQuery jest używany w tym przykładzie:

$('table tr:odd').addClass('row1'); 

Edit: Nie wiem, dlaczego dałem przykłady wykorzystaniem wierszy tabeli ... zastąpić tr z li i table z ul i ma zastosowanie do np

Answer 6

Jeśli chcesz zrobić to czysto w CSS, musisz mieć klasę, którą przypiszesz do każdego alternatywnego elementu listy. Na przykład.

<ul> 
    <li class="alternate"><a href="link">Link 1</a></li> 
    <li><a href="link">Link 2</a></li> 
    <li class="alternate"><a href="link">Link 3</a></li> 
    <li><a href="link">Link 4</a></li> 
    <li class="alternate"><a href="link">Link 5</a></li> 
</ul> 

Jeśli twoja lista jest generowana dynamicznie, to zadanie będzie znacznie łatwiejsze.

Jeśli nie chcesz ręcznie aktualizować zawartość ta za każdym razem, można użyć biblioteki jQuery i zastosować styl na przemian do każdego elementu <li> w swoim liście:

<ul id="myList"> 
    <li><a href="link">Link 1</a></li> 
    <li><a href="link">Link 2</a></li> 
    <li><a href="link">Link 3</a></li> 
    <li><a href="link">Link 4</a></li> 
    <li><a href="link">Link 5</a></li> 
</ul> 

a kod jQuery :

$(document).ready(function(){ 
    $('#myList li:nth-child(odd)').addClass('alternate'); 
}); 

Answer 7

Spróbuj dodać pary atrybutów klas, powiedz "parzyste" i "nieparzyste", na przemienne elementy listy, np.

<ul> 
    <li class="even"><a href="link">Link 1</a></li> 
    <li class="odd"><a href="link">Link 2</a></li> 
    <li class="even"><a href="link">Link 3</a></li> 
    <li class="odd"><a href="link">Link 4</a></li> 
    <li class="even"><a href="link">Link 5</a></li> 
</ul> 

W <stylu> części strony HTML, lub w połączonym arkuszu stylów, należy określić te same zajęcia, określający żądane kolory tła:

li.even { background-color: red; } 
li.odd { background-color: blue; } 

Możesz chcieć użyć biblioteka szablonów, gdy Twoje potrzeby ewoluują, aby zapewnić Ci większą elastyczność i ograniczyć pisanie. Po co ręcznie wpisywać wszystkie te elementy listy?

Answer 8

Jeśli używasz rozwiązanie jQuery to zadziała na IE8:

jQuery

$(document).ready(function(){ 
$('#myList li:nth-child(odd)').addClass('alternate'); 
}); 

CSS

.alternate { 
background: black; 
} 

Jeśli używasz soloution CSS to won 't praca o n IE8:

li:nth-child(odd) { 
    background: black; 
} 

Answer 9

to ustawić kolor tła na parzystych i nieparzystych li:

li:nth-child(odd) { background: #ffffff; } 
    li:nth-child(even) { background: #80808030; }