Question

在我的带有导航菜单的wordpress主页中，所以我想在前4个导航菜单中添加4个不同的图像，然后如果第5个菜单可用则将第1个菜单图像作为背景同样为第6个 - ＆gt;第2张图片，第7张 - ＆gt;第3个图像，第8个 - ＆gt;第4个图像这样的序列一直运行到菜单列表的末尾。所以它继续4系列的组。因此，对于导航图像，我使用无序列表此标记。所以请帮帮我..我很难解决这个问题。

Answer 1

如果是这个HTML标记

<ul id="menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
</ul>

您可以使用:nth-child()选择器。

这是CSS：

#menu {
    list-style-type: none;
}

#menu li:nth-child(4n-3) {
    background: red;
}
#menu li:nth-child(4n-2) {
    background: green;
}
#menu li:nth-child(4n-1) {
    background: blue;
}
#menu li:nth-child(4n) {
    background: silver;
}

只需将background属性中的颜色替换为您要用作背景的图像。

http://cssdeck.com/labs/csfcyj5t

将背景图像添加到wordpress中的导航菜单并动态更改图像

1 个答案: