列表项的备用背景颜色

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

这是在偶数和奇数 li 上设置背景颜色：

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

Answer 4

您可以通过向每个列表项添加交替样式类来实现此目的

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