列表项的备用背景颜色

时间:2008-12-11 03:18:05

标签: html css

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

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

9 个答案:

答案 0 :(得分:282)

一些可爱的CSS3怎么样?

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

答案 1 :(得分:52)

如果您想纯粹在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');
});

答案 2 :(得分:5)

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

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

答案 3 :(得分:3)

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

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

答案 4 :(得分:2)

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

答案 5 :(得分:1)

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

答案 6 :(得分:1)

您可以通过在行上指定交替的类名来实现。我更喜欢使用row0row1,这意味着如果以编程方式构建列表,您可以轻松添加它们:

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

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

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

修改:我不知道为什么我使用表格行给出了示例...将tr替换为li而将table替换为ul并且它适用举例到

答案 7 :(得分:0)

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

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

答案 8 :(得分:-8)

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

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

li + li, li + li + li + li {
  background-color: white;
}
豫ICP备18024241号-1