替换列表项的背景颜色

您可以通过硬编码序列，如下所示:

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


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

可以通过向每个列表项添加交替样式类来实现这一点

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

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

可以通过在行上指定交替的类名来实现。我更喜欢使用 row0和 row1，这意味着如果列表是以编程方式构建的，那么可以很容易地添加它们:

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

另一种方法是使用 javascript. jQuery 在这个例子中使用:

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

编辑: 我不知道为什么我给出了使用表行的例子... ... 将 ABC0替换为 ABC1，将 ABC2替换为 ul，它适用于您的例子

如果你想纯粹用 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>

如果您的列表是动态生成的，那么这个任务将会容易得多。

If you don't want to have to manually update this content each time, you could use the jQuery library and apply a style alternately to each <li> item in your list:

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

Try adding a pair of class attributes, say 'even' and 'odd', to alternating list elements, e.g.

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

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

来点 CSS3怎么样？

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

If you use the jQuery solution it will work on 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; }