如何选择元素中除最后一个子元素之外的所有子元素？

Question

如何使用 CSS3 选择器选择除最后一个子元素之外的所有子元素？

例如，仅获取最后一个孩子将是

div:nth-last-child(1)

。

Answer 1

您可以使用否定伪类

:not()

来对抗

:last-child

伪类。引入 CSS 选择器级别 3，它在 IE8 或更低版本中不起作用：

:not(:last-child) { /* styles */ }

Answer 2

让事情变得简单：

您可以将您的样式应用于所有 div 并使用 :last-child:

重新初始化最后一个 div

例如在 CSS 中：

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

或在SCSS中：

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

• 易于阅读/记住
• 执行速度快
• 浏览器兼容（IE9+，因为它仍然是CSS3）

---

编辑：我写这篇文章的时候

:not

并没有被所有浏览器覆盖。今天我会更加平衡，并且会在某些情况下使用此解决方案，例如，如果您想覆盖默认行为。

Answer 3

Nick Craver 的解决方案有效，但您也可以使用这个：

:nth-last-child(n+2) { /* Your code here */ }

CSS Tricks 的 Chris Coyier 为此做了一个很好的 ：第 n 个测试者。

Answer 4

当IE9到来时，一切都会变得更容易。但很多时候，您可以将问题切换到需要 :first-child 的问题并设置元素另一侧的样式 (IE7+)。

Answer 5

css3中有一个

:not

选择器。使用

:not()

和内部的

:last-child

选择除最后一个之外的所有子项。例如，要选择

li

中除最后一个

ol

之外的所有

li

，请使用以下代码。

ol li:not(:last-child) {
  color: red
}

<ol>
  <li>
    foo
  </li>
  <li>
    foo
  </li>
  <li>
    foo
  </li>
</ol>

Answer 6

将 nick craver 的解决方案与 selectivizr 结合使用可实现跨浏览器解决方案 (IE6+)

Answer 7

如果您在父级的嵌套中使用它，那么最简单的方法是：

&:not(:last-child){
  ....
}

示例：

.row {  //parent
 ...
 ...
 ...
 &:not(:last-child){
  ....
 }
}

Answer 8

要查找最后一个元素，请使用

<style>
ul li:not(:last-child){ color:#a94442}  
</style>

Answer 9

使用更通用的选择器，您可以实现此目的，如下所示

& > *:not(:last-child) {/* styles here */}

示例

<div class="parent">
  <div>Child one</div>
  <div>Child two</div>
</div>

这将捕获父级中的所有子 DIV

Answer 10

Nick Craver 的解决方案给了我我所需要的东西，但对于那些使用 CSS-in-JS 的人来说它是明确的：

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

Answer 11

.nav-menu li:not(:last-child){
    // write some style here
}

此代码应将样式应用于除最后一个子项之外的所有