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

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

<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>
11.12.2008 03:18:05
это также известно как «чередование тигров», и нет, я не шучу
Jeff Atwood 11.12.2008 07:42:51
9 ОТВЕТОВ
РЕШЕНИЕ

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

li { background: green; }
li:nth-child(odd) { background: red; }
289
19.03.2010 13:25:28
@ Adam C Можете ли вы предложить способ применить это для динамического просмотра списка? Когда я попробовал это с динамическим просмотром списка, когда данные поступали из веб-сервиса, это не сработало!
SKT 31.10.2012 15:02:02
У кого-нибудь есть пример этого, который хорошо работает с вложенными списками? Таким образом, цвет фона первого элемента во вложенном списке будет иметь цвет, противоположный цвету фона элемента списка непосредственно перед вложенным списком. Кроме того, цвет фона следующего элемента списка родительского списка противоположен цвету фона последнего элемента списка во вложенном списке.
L S 30.04.2014 13:59:52
Можно пропустить первое утверждение, чтобы использовать существующий цвет фона.
xilef 10.11.2014 10:06:43

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

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

li + li, li + li + li + li {
  background-color: white;
}
-9
11.12.2008 03:22:15
Это
nickf 11.12.2008 03:23:07
@nickf Да. Я думаю, что «правильный» путь включает CSS3 и почти ничего не поддерживает.
sblundy 11.12.2008 03:27:21

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

<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');
});
5
11.12.2008 03:27:37

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

2
11.12.2008 03:22:26
Это и тот факт, что вы можете сделать это автоматически с помощью Javascript после эффекта, как говорит принятый ответ. Я просто хотел дать вам +1 за правильный ответ.
Karl 11.12.2008 04:28:17

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

1
11.12.2008 03:25:24

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

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

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

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

3
11.12.2008 03:41:47

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

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

  li:nth-child(odd) { background: #ffffff; }
  li:nth-child(even) { background: #80808030; }
0
24.01.2018 10:12:03