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

Posted 2023-04-13

【中文标题】如何分别为wordpress导航的每个列表项背景设置样式

【英文标题】：How to style each list item background of the wordpress navigation separately

【发布时间】：2014-07-29 05:00:06

【问题描述】：

所以我正在使用标准的 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 但不幸的是没有任何结果..

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

【参考方案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/