li 背景颜色重复/图案

Posted

技术标签:

【中文标题】li 背景颜色重复/图案【英文标题】:li background colors repeat/pattern 【发布时间】:2013-01-08 14:58:25 【问题描述】:

我正在创建一个 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>

我想需要 javascript 来识别 li 子编号。

有没有人知道我该如何做到这一点?

感谢您的宝贵时间。

【问题讨论】:

不需要javascript。如果您发布您的标记以及一些 CSS 以显示 mattgemmell.com/2008/12/08/what-have-you-tried,那就更好了 【参考方案1】:

使用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');

【讨论】:

这行得通,它在 IE8 中不兼容,但不能忍受。我在想可能有一些js可以完成这项工作。

以上是关于li 背景颜色重复/图案的主要内容,如果未能解决你的问题,请参考以下文章

pb 数据窗口背景颜色

word表格背景颜色设置 word表格如何设置背景颜色

如何为图案填充添加背景颜色?

页面加载时自动为页面的背景颜色设置动画[重复]

CSS li 当前选中项目背景颜色为蓝色怎么做?

如何设置 Pages 文稿背景颜色及背景图片?