我有一个列表，每个项目都是链接的，有没有办法可以改变每个项目的背景颜色？
<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 页面的
li.even { background-color: red; }
li.odd { background-color: blue; }
随着需求的发展，您可能希望使用模板库，以便为您提供更大的灵活性并减少打字。为什么要手动输入所有这些列表元素？
【讨论】：
这是在偶数和奇数 li 上设置的背景颜色：
li:nth-child(odd) { background: #ffffff; }
li:nth-child(even) { background: #80808030; }
【讨论】：
由于您使用标准 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, li + li + li, li + li + li + li + li {
background-color: black;
}
li + li, li + li + li + li {
background-color: white;
}
【讨论】：