定位菜单栏中活动 ul 之后的 ul

Question

我正在整理一个 WP 网站，在菜单栏上，活动菜单项带有下划线。所有菜单项 (li) 都设置了 padding-right，但我需要将其从活动元素中移除，以便底部的边框仅延伸到文本的末尾。为了弥补它，我需要以某种方式瞄准下一个 li 但我不太清楚该怎么做。我在别人的 WP 主题的背景下工作，这总是一个挑战，但我认为这可能是可行的，我只是不知道如何组合 CSS 选择器。这是基本的菜单结构：

<nav id="top-menu">
  <ul id="menu-top">
    <li id="menu-item">
      <a>ITEM 1</a>
    </li>
    <li id="menu-item current-menu-item">
      <a>ITEM 2</a>
    </li>
    <li id="menu-item">
      <a>ITEM 3</a>
    </li>
  </ul>
</nav>

要定位元素上的填充，我必须使用 #top-menu ul > li#current-menu-item > a

如果我想在这个例子中定位第三个元素，我会使用什么代码？这甚至可能吗，还是我试图过于具体？我希望有一些子选择器和后代选择器的组合，但我不确定如何让它们一起工作。感谢您的帮助！

Answer 1

通常在这种情况下，我会使用一些 jQuery。使用 jQuery，您可以使用 next() 来获取您所定位的 li 之后的 li。

首先，您混淆了 id 和类。您需要在这里使用类（ID 不能重复）：

<nav id="top-menu">
  <ul id="menu-top">
    <li class="menu-item">
      <a>ITEM 1</a>
    </li>
    <li class="menu-item current-menu-item">
      <a>ITEM 2</a>
    </li>
    <li class="menu-item">
      <a>ITEM 3</a>
    </li>
  </ul>
</nav>

那么这会给你当前一个之后的 li：

$('.current-menu-item').next()

所以你可以做一些事情，比如向它添加另一个类（显然我的类名比它真正需要的长得多！）：

$('.current-menu-item').next().addClass('the-one-after-the-current-menu-item');

然后您可以通过 css 设置样式。

.the-one-after-the-current-menu-item { // styling here.... }

Answer 2

是的，CSS 中的“+”选择后面的元素。在这种情况下，是这样的：

#current-menu-item + li {
    background: red;
}

不过，您可能还有另一个问题，即您不能在 ID 中使用空格。如果您的示例中的 ID 是类，那您就完全没问题了。