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

Question

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

<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

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

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

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

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

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

В разделе

Answer 5

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

Answer 6

Если вы используете решение 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;
}

Answer 7

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

Answer 8

Это цвет фона на четном и нечетном li:

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

Answer 9

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

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

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