列表项目的备用背景颜色
我有一个列表，每个项目都是链接的，有没有一种方法可以replace每个项目的背景颜色？
<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>
如果您的列表是dynamic生成的，那么这个任务会更容易。
如果您不希望每次都手动更新此内容，则可以使用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; }
您可能需要使用模板库来满足您的需求，为您提供更大的灵活性并减less打字量。 为什么用手input所有这些列表元素？
由于您使用标准HTML，您将需要定义单独的类并手动将行设置为类。
你可以通过在行上指定交替的类名来完成。 我更喜欢使用row0和row1 ，这意味着如果以编程方式构build列表，则可以轻松地添加它们：
for ($i = 0; $i < 10; ++$i) { echo '<tr class="row' . ($i % 2) . '">...</tr>'; }
另一种方法是使用JavaScript。 在这个例子中使用了jQuery：
$('table tr:odd').addClass('row1');
编辑： 我不知道为什么我使用表行的例子…replacetr与li和table与ul ，它适用于你的例子
如果你使用jQuery解决scheme， 它将在IE8上工作 ：
jQuery的
$(document).ready(function(){ $('#myList li:nth-child(odd)').addClass('alternate'); });
CSS
.alternate { background: black; }
如果您使用CSS soloution， 则无法在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; }
