Html 列表项的替代背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/358350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternate background colors for list items
提问by Brad
I have a list, and each item is linked, is there a way I can alternate the background colors for each item?
我有一个列表，每个项目都是链接的，有没有办法可以改变每个项目的背景颜色？
<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>
回答by Adam C
How about some lovely CSS3?
来一些可爱的 CSS3 怎么样？
li { background: green; }
li:nth-child(odd) { background: red; }
回答by Phil.Wheeler
If you want to do this purely in CSS then you'd have a class that you'd assign to each alternate list item. E.g.
如果您想纯粹在 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 your list is dynamically generated, this task would be much easier.
如果您的列表是动态生成的，则此任务会容易得多。
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:
如果您不想每次都手动更新此内容，您可以使用 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>
And your jQuery code:
还有你的 jQuery 代码：
$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});
回答by Chris Van Opstal
You can achieve this by adding alternating style classes to each list item
您可以通过向每个列表项添加交替样式类来实现此目的
<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>
And then styling it like
然后造型就像
li { backgorund:white; }
li.odd { background:silver; }
You can further automate this process with javascript (jQuery example below)
您可以使用 javascript（下面的 jQuery 示例）进一步自动化此过程
$(document).ready(function() {
$('table tbody tr:odd').addClass('odd');
});
回答by Chris Van Opstal
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>
In a <style> section of the HTML page, or in a linked stylesheet, you would define those same classes, specifying your desired background colours:
在 HTML 页面的 <style> 部分或链接的样式表中，您将定义相同的类，指定所需的背景颜色：
li.even { background-color: red; }
li.odd { background-color: blue; }
You might want to use a template library as your needs evolve to provide you with greater flexibility and to cut down on the typing. Why type all those list elements by hand?
随着需求的发展，您可能希望使用模板库来为您提供更大的灵活性并减少打字。为什么要手动输入所有这些列表元素？
回答by rlanham
Since you using standard HTML you will need to define separate class for and manual set the rows to the classes.
由于您使用标准 HTML，您将需要定义单独的类并手动将行设置为类。
回答by nickf
You can do it by specifying alternating class names on the rows. I prefer using row0and row1, which means you can easily add them in, if the list is being built programmatically:
您可以通过在行上指定交替的类名来实现。我更喜欢使用row0and row1，这意味着如果列表是以编程方式构建的，您可以轻松添加它们：
for ($i = 0; $i < 10; ++$i) {
echo '<tr class="row' . ($i % 2) . '">...</tr>';
}
Another way would be to use javascript. jQuery is being used in this example:
另一种方法是使用javascript。本例中使用了 jQuery：
$('table tr:odd').addClass('row1');
Edit: I don't know why I gave examples using table rows... replace trwith liand tablewith uland it applies to your example
编辑：我不知道为什么我用表格行给出了例子......替换tr为li和table，ul它适用于你的例子
回答by Augusto Triste
If you use the jQuery solution it will workon IE8:
如果您使用 jQuery 解决方案，它将在 IE8 上运行：
jQuery
jQuery
$(document).ready(function(){
$('#myList li:nth-child(odd)').addClass('alternate');
});
CSS
CSS
.alternate {
background: black;
}
If you use the CSS soloution it won't workon IE8:
如果您使用 CSS 解决方案，它将无法在 IE8 上运行：
li:nth-child(odd) {
background: black;
}
回答by Avanish Kumar
This is set background color on even and odd li:
这是在偶数和奇数 li 上设置背景颜色：
li:nth-child(odd) { background: #ffffff; }
li:nth-child(even) { background: #80808030; }
回答by sblundy
You can by hardcoding the sequence, like so:
您可以通过对序列进行硬编码，如下所示：
li, li + li + li, li + li + li + li + li {
background-color: black;
}
li + li, li + li + li + li {
background-color: white;
}
