Альтернативные цвета фона для элементов списка

У меня есть список, и каждый элемент связан, есть ли способ изменить цвет фона для каждого элемента?

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

Как насчет прекрасного CSS3?

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

Если вы хотите сделать это исключительно в CSS, у вас будет класс, который вы назначаете каждому альтернативному элементу списка. Например

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

Если ваш список генерируется динамически, эта задача будет намного проще.

Если вы не хотите каждый раз обновлять этот контент вручную, вы можете использовать библиотеку jQuery и поочередно применять стиль к каждому <li>элементу в вашем списке:

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

И ваш код jQuery:

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

Вы можете добиться этого, добавив чередующиеся классы стилей к каждому элементу списка.

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

А затем стилизовать его как

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

Вы можете дополнительно автоматизировать этот процесс с помощью javascript (пример jQuery ниже)

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

Попробуйте добавить пару атрибутов класса, скажем, «четный» и «нечетный», к чередующимся элементам списка, например

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

В разделе <style> страницы HTML или в связанной таблице стилей вы должны определить те же классы, указав желаемые цвета фона:

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

Возможно, вы захотите использовать библиотеку шаблонов по мере развития ваших потребностей, чтобы предоставить вам большую гибкость и сократить набор текста. Зачем набирать все эти элементы списка вручную?

Поскольку вы используете стандартный HTML, вам нужно будет определить отдельный класс и вручную установить строки для классов.

Вы можете сделать это, указав чередующиеся имена классов в строках. Я предпочитаю использовать row0и row1, что означает, что вы можете легко добавить их, если список создается программно:

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

Другой способ - использовать javascript. В этом примере используется jQuery:

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

Изменить: я не знаю, почему я привел примеры с использованием строк таблицы ... замените trна liи tableна, ulи это применимо к вашему примеру

Если вы используете решение jQuery, оно будет работать в IE8:

jQuery

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

CSS

.alternate {
background: black;
}

Если вы используете решение CSS, оно не будет работать в IE8:

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

Это устанавливает цвет фона для четного и нечетного li:

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

Вы можете жестко закодировать последовательность, например:

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

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