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

Ответ 1

Как насчет какого-нибудь прекрасного CSS3?

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

Ответ 2

Если вы хотите сделать это исключительно в 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');
});

Ответ 3

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

<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');
});

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Вы можете сделать это, указав переменные имена классов в строках. Я предпочитаю использовать 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 и применим к вашему примеру

Ответ 7

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

JQuery

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

CSS

.alternate {
background: black;
}

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

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

Ответ 8

Это установить цвет фона на четных и нечетных li:

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

Ответ 9

li: nth-child {фон: красный; }

Ответ 10

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

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

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