Альтернативні кольори фону для елементів списку

У мене є список, і кожен елемент пов'язаний, чи є спосіб чергувати кольори фону для кожного елемента?

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