CSS last-child 导致意外结果答案

【问题标题】：CSS last-child causing unexpected resultsCSS last-child 导致意外结果
【发布时间】：2014-06-01 23:56:34
【问题描述】：

我正在使用 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 的那个。

关于为什么会发生这种情况以及如何纠正它的任何想法？我只想影响 CONTACT。

谢谢！克里斯

【问题讨论】：

标签： css wordpress css-selectors

【解决方案1】：

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

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

【讨论】：

谢谢！现在我看到了，将最后一个子伪放在 li 上而不是 a 上是完全合理的。

【解决方案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 是唯一的。

【讨论】：