Question

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

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

Answer 1

一些可爱的CSS3怎么样？

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

Answer 2

如果您想纯粹在CSS中执行此操作，那么您将拥有一个您为每个备用列表项指定的类。 E.g。

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

Answer 3

您可以通过向每个列表项添加交替样式类来实现此目的

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

Answer 4

尝试向交替列表元素添加一对类属性，比如'even'和'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>

在＆lt; style＆gt;中在HTML页面的一部分或链接的样式表中，您将定义相同的类，指定所需的背景颜色：

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

您可能希望在需求发展时使用模板库，以便为您提供更大的灵活性并减少打字。为什么要手动输入所有这些列表元素？

Answer 5

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

Answer 6

您可以通过在行上指定交替的类名来实现。我更喜欢使用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并且它适用举例到

Answer 7

如果您使用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;
}

Answer 8

这是偶数和奇数li的背景颜色：

  li:nth-child(odd) { background: #ffffff; }
  li:nth-child(even) { background: #80808030; }

Answer 9

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

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

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

列表项的备用背景颜色

9 个答案: