Màu nền thay thế cho các mục danh sách

Tôi có một danh sách và từng mục được liên kết, có cách nào để tôi có thể thay thế màu nền cho từng mục không?

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

Làm thế nào về một số CSS3 đáng yêu?

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

Nếu bạn muốn làm điều này hoàn toàn trong CSS thì bạn sẽ có một lớp mà bạn chỉ định cho mỗi mục danh sách thay thế. Ví dụ

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

Nếu danh sách của bạn được tạo động, tác vụ này sẽ dễ dàng hơn nhiều.

Nếu bạn không muốn phải cập nhật nội dung này theo cách thủ công mỗi lần, bạn có thể sử dụng thư viện jQuery và áp dụng một kiểu luân phiên cho từng <li>mục trong danh sách của mình:

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

Và mã jQuery của bạn:

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

Bạn có thể đạt được điều này bằng cách thêm các lớp kiểu xen kẽ vào từng mục danh sách

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

Và sau đó tạo kiểu như

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

Bạn có thể tự động hóa thêm quá trình này bằng javascript (ví dụ jQuery bên dưới)

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

Hãy thử thêm một cặp thuộc tính lớp, chẳng hạn như 'chẵn' và 'lẻ', vào các phần tử danh sách xen kẽ, ví dụ:

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

Trong phần <style> của trang HTML hoặc trong một biểu định kiểu được liên kết, bạn sẽ xác định cùng các lớp đó, chỉ định màu nền mong muốn của bạn:

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

Bạn có thể muốn sử dụng thư viện mẫu khi nhu cầu của bạn phát triển để cung cấp cho bạn sự linh hoạt hơn và cắt giảm việc nhập. Tại sao phải nhập tất cả các phần tử danh sách đó bằng tay?

Vì bạn sử dụng HTML tiêu chuẩn, bạn sẽ cần phải xác định lớp riêng biệt và đặt thủ công các hàng cho các lớp.

Bạn có thể làm điều đó bằng cách chỉ định tên lớp xen kẽ trên các hàng. Tôi thích sử dụng row0vàrow1 , có nghĩa là bạn có thể dễ dàng thêm chúng vào, nếu danh sách đang được lập trình:

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

Một cách khác là sử dụng javascript. jQuery đang được sử dụng trong ví dụ này:

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

Chỉnh sửa: Tôi không biết tại sao tôi đã đưa ra các ví dụ bằng cách sử dụng các hàng trong bảng ... thay thế trbằng livà tablebằng ulvà nó áp dụng cho ví dụ của bạn

Nếu bạn sử dụng giải pháp jQuery, nó sẽ hoạt động trên IE8:

jQuery

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

CSS

.alternate {
background: black;
}

Nếu bạn sử dụng CSS soloution, nó sẽ không hoạt động trên IE8:

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

Đây là màu nền được đặt trên li chẵn và lẻ:

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

Bạn có thể mã hóa cứng chuỗi, như sau:

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

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