Question

我正在组建一个WP网站，在菜单栏上，活动菜单项带有下划线。所有菜单项（li）都有一个padding-right设置，但是我需要将它从活动元素上取下，这样底部的边框才会延伸到文本的末尾。为了弥补它，我需要以某种方式瞄准下一个李，但我不知道该怎么做。我在其他人的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＆gt; li＃current-menu-item＆gt;一个

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

Answer 1

通常在这种情况下我会使用一些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.... }

Answer 2

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

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

尽管如此，您可能还有另一个问题，即您无法在ID中使用空格。如果您的示例中的ID是类，那么您将完全没问题。

Answer 3

正如russtuck91指出的那样，current-menu-item需要成为一个类，然后他的回答是我要实现的，它是最干净的。

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

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

仍会推荐russtuck91的回答

在菜单栏中的活性ul之后靶向ul

3 个答案: