CSS last-child导致意外结果

Question

我正在使用Wordpress重置主题并从头开始设计子主题。该网站的菜单（导航）将包含下拉菜单，这些菜单正在运行。以下是菜单结构（在WP中自动生成）：

<nav id="nav" role="navigation">
  <div class="menu-menu-1-container">
    <ul id="menu-menu-1" class="menu">
      <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-20"><a href="http://somesite.com/">Home</a></li>
      <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://somesite.com/about-us/">About Us</a></li>
      <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://somesite.com/admissions/">Admissions</a>
        <ul class="sub-menu">
          <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://somesite.com/sample-page/">Sample Page</a></li>
          <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://somesite.com/sample-page-2/">Sample Page 2</a></li>
        </ul>
      </li>
      <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://somesite.com/contact-us/">Contact Us</a></li>
    </ul>
  </div>
</nav>

一切都很好。随着和下拉。我在CSS中有这个工作，但也在最后一个菜单项（联系我们）上放置一个右边框：

header #nav li a
{
    color: #000;
    text-decoration: none;
    border-right: 1px solid #000;
    margin-right: 9px;
    padding: 0px 9px 0px 0px;       
}

然而，当我添加这个：

header #nav ul li a:last-child
{
    border-right: none;
    margin-right: 0px;
    padding: 0px;
}

我明白了：

它会影响每个“a”，除了它下面有一个嵌套UL的那个。

有关为何发生这种情况以及如何纠正的任何想法？我只想影响联系。

谢谢！ 克里斯

Answer 1

您使用的:last-child指的是“每个 a中的最后li”。您需要使用以下内容：

header #nav ul li:last-child a
{
    border-right: none;
    margin-right: 0px;
    padding: 0px;
}

Answer 2

使用：

#nav > .menu-menu-1-container > ul > li:last-child > a{
    border-right: none;
    margin-right: 0px;
    padding: 0px;
}

>仅用于指代直接孩子。

或

#menu-item-24 > a{
    /* css style here */
}

如果上述ID是唯一的。