列表项的备用背景色

我有一个列表，并且每个项目都已链接，有没有办法我可以为每个项目替换背景颜色？

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

在HTML页面的<style>部分或链接的样式表中，您将定义这些相同的类，并指定所需的背景色：

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

您可能需要随着需求的发展而使用模板库，以便为您提供更大的灵活性并减少键入。为什么要手动键入所有这些列表元素？

由于您使用的是标准HTML，因此您需要为定义单独的类，并手动将行设置为这些类。

您可以通过在行上指定交替的类名来实现。我更喜欢使用row0and 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上设置背景颜色：

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