Question

所以我正在使用标准的wordpress导航，当列表项中的链接处于活动状态时，我需要更改每个菜单项的背景。

.current-menu-item为所有列表项提供了技巧，但问题是我对每个元素都有相同的样式。

例如：

<nav>
    <div>
        <ul>
            <li>
              <a href="index.html">home</a>
            </li>
            <li>
              <a href="portfolio.html">portfolio</a>
            </li>
        </ul>
    </div>
</nav>

有没有人有这方面的经验？

我尝试使用以下网页：http://codex.wordpress.org/Function_Reference/wp_nav_menu 但不幸的是没有任何结果..

同样使用子选择器也不起作用..

Answer 1

听起来您希望每个链接都有不同的活动状态。 .current-menu-item捕获活动链接，但不为每个链接提供自定义。

我认为你可以使用nth-child和.current-menu-item的组合。你知道.current-menu-item应用在哪里吗？如果它在<li>上，则应该有效：

nav li:nth-child(1).current-menu-item {
    background-color: red;
}
nav li:nth-child(2).current-menu-item {
    background-color: blue;
}
nav li:nth-child(3).current-menu-item {
    background-color: green;
}

在小提琴中看到它：http://jsfiddle.net/Dz32R/

如何分别设置wordpress导航的每个列表项背景的样式

1 个答案: