0

我正在整理一个 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

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

4

3 回答 3

0

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

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

虽然，您可能会遇到另一个问题，即您不能在 ID 中使用空格。如果您的示例中的 ID 是类，那么您会完全没问题。

于 2013-10-04T01:45:35.860 回答
0

通常在这种情况下，我会使用一些 jQuery。使用 jQuery，您可以使用next()来获取目标之后的 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.... }
于 2013-10-04T01:40:20.453 回答
0

正如 russtuck91 所指出的，这current-menu-item需要是一个类，那么他的答案就是我要实现的，它是最干净的。

但是，如果你不能改变它（你必须这样做，因为你不能在 id 中有空格），你可以使用 :nth-child(x) 其中 x 是子元素的数量：

#top-menu li:nth-child(3) a {
    color:red;
}

虽然仍然会推荐 russtuck91 的答案

于 2013-10-04T02:31:31.553 回答