Alternatywne kolory tła dla elementów listy

Mam listę, a każda pozycja jest połączona. Czy istnieje sposób na zmianę kolorów tła dla każdej pozycji?

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

A może jakiś piękny CSS3?

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

Jeśli chcesz to zrobić wyłącznie w CSS, będziesz 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 byłoby znacznie łatwiejsze.

Jeśli nie chcesz za każdym razem ręcznie aktualizować tej zawartości, możesz użyć biblioteki jQuery i zastosować styl naprzemiennie do każdego <li>elementu na 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>

I twój kod jQuery:

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

Możesz to osiągnąć, dodając naprzemienne klasy stylów 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 stylizuj to jak

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

Możesz dodatkowo zautomatyzować ten proces za pomocą javascript (przykład jQuery poniżej)

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

Spróbuj dodać parę atrybutów klas, powiedz „parzyste” i „nieparzyste”, do naprzemiennych elementów 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 sekcji <style> strony HTML lub w połączonym arkuszu stylów możesz zdefiniować te same klasy, określając żądane kolory tła:

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

Możesz chcieć skorzystać z biblioteki szablonów w miarę ewolucji Twoich potrzeb, aby zapewnić Ci większą elastyczność i ograniczyć pisanie. Po co ręcznie wpisywać wszystkie te elementy listy?

Ponieważ używasz standardowego HTML, będziesz musiał zdefiniować osobną klasę i ręcznie ustawić wiersze na klasy.

Możesz to zrobić, określając naprzemienne nazwy klas w wierszach. Wolę używać row0i row1, co oznacza, że ​​możesz je łatwo dodać, jeśli lista jest budowana programowo:

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

Innym sposobem byłoby użycie javascript. W tym przykładzie używany jest jQuery:

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

Edit: Nie wiem, dlaczego dałem przykłady korzystania wiersze tabeli ... zastąpić trz lii tablez uli ma ona zastosowanie dla przykładu

Jeśli korzystasz z rozwiązania jQuery, będzie działać na IE8:

jQuery

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

CSS

.alternate {
background: black;
}

Jeśli używasz rozwiązania CSS, nie będzie działać w IE8:

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

To jest ustawiony kolor tła na parzyste i nieparzyste li:

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

Możesz zakodować sekwencję na stałe, na przykład:

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

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