最后一个孩子 CSS3答案

【问题标题】：Last child CSS3最后一个孩子 CSS3
【发布时间】：2014-09-20 07:27:05
【问题描述】：

我需要删除列表中第一项的左边框和第四项的右边框，而不影响这些项的任何子列表。我该怎么做？

我的菜单列表代码是：

<div id="menu">
  <ul><li><a href="#">First Item</a><ul>
  <li><a href="#">First Sub Item</a></li>
  <li><a href="#">Second Sub Item</a></li>
  </ul></li></ul>

  <ul>
    <li><a href="#">Second Item</a>
      <ul>
        <li><a href="#">First Sub Item</a></li>
        <li><a href="#">Second Sub Item</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#">Third Item</a>
      <ul>
        <li><a href="#">First Sub Item</a></li>
        <li><a href="#">Second Sub Item</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#">Fourth Item</a>
      <ul>
        <li><a href="#">First Sub Item</a></li>
        <li><a href="#">Second Sub Item</a></li>
      </ul>
    </li>
  </ul>
</div>

这是我添加边框的代码

#menu ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; }

我用这段代码删除了第一个孩子的边框

#menu ul:first-child a { border-left: 0px; }

它工作得很好，但是当我从 last-child 中删除时，它会影响子项目 ul li ul li a not ul li a

我无法手动将类添加到最后一个孩子，因为它是动态的，所以我不知道管理员将来会添加多少项目

【问题讨论】：

为这个问题提供一些 CSS 可以让我们找出哪个元素有边框，以便我们提供帮助。
@user1370371 请提供 CSS，我们将能够提供和解释实际的工作代码，而不是猜测什么可以解决您遇到的问题。
@user1370371 谢谢你，但我认为我们需要更多，即构成和影响#menu 的所有 CSS 我们需要它，以便我们可以看到它的外观并更好地理解你想要达到的目标。您也可以通过截屏并圈出需要消失的边框来做到这一点，因为 atm 很模糊。

标签： css pseudo-class css-selectors

【解决方案1】：

#menu ul:first-child { border-left: 0; }
#menu ul:last-child { border-right: 0; }

请注意，直到 IE9，IE 才支持 last-child。第一个孩子应该在 IE7 及更高版本中工作。

【讨论】：

【解决方案2】：

试试这个

#menu  ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; color:#000; }

#menu > ul:first-child > li > a { border-left: 0px;} 

#menu > ul:last-child > li > a { border-right: 0px}

【讨论】：

【解决方案3】：

第一项：

#menu ul:first-child

最后一项：

#menu ul:last-child

为了完全兼容浏览器，为第一个和最后一个元素添加另一个类

 <ul class="first-list">
  <li><a href="#">First Item</a><ul>
  <li><a href="#">First Sub Item</a></li>
  <li><a href="#">Second Sub Item</a></li>
  </ul></li></ul>

  <ul>
    <li><a href="#">Second Item</a>
      ...

  <ul class="last-list">
    <li><a href="#">Fourth Item</a>
      <ul>
        <li><a href="#">First Sub Item</a></li>
        <li><a href="#">Second Sub Item</a></li>
      </ul>
    </li>
  </ul>

.first-list {}
.last-list {}

大多数语言都支持对查询或数组中的第一个和最后一个条目进行检测。

或

如果您使用的是 jquery，您可以像这样选择：

$('#menu ul:first').addClass('first-list')

【讨论】：