li背景颜色重复/模式

时间:2013-01-24 18:38:01

标签: javascript html css wordpress navigation

我正在创建一个wordpress主题,我正在尝试创建一个导航栏,其中每个li都有不同的背景颜色(例如红色然后是绿色然后是蓝色)。然后在使用前三种颜色后再次重复它们。

所以例如:

<div id="top-nav">
    <ul>
        <a href="#"><li>Hampstead</li></a> background red
        <a href="#"><li>Topsail Beach</li></a> background blue
        <a href="#"><li>North Topsail Beach</li></a> background green
        <a href="#"><li>Surf City</li></a> background red
        <a href="#"><li>Holly Ridge</li></a> background blue
        <a href="#"><li>Sneads Ferry</li></a> background green
    </ul>
</div>

我想要识别li子号码需要javascript。

有没有人对如何做到这一点有任何见解?

感谢您的时间。

1 个答案:

答案 0 :(得分:4)

使用css nth-child selector,您可以轻松实现此功能而无需使用Javascript。 尝试像

这样的东西
li:nth-child(3n)
{
  background:red;
}
li:nth-child(3n-1) 
{
  background:blue;
}
li:nth-child(3n-2) 
{
  background:green;
}

如果你喜欢用jQuery做这件事,它就像它自己的jQuery has an nth-child selector一样。 然后它就像是

$("li:nth-child(3n)").css('background-color', 'red');
$("li:nth-child(3n-1)").css('background-color', 'blue');
$("li:nth-child(3n-2)").css('background-color', 'green');