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

【问题标题】：How can I select all children of an element except the last child?如何选择除最后一个子元素之外的元素的所有子元素？
【发布时间】：2011-02-04 03:18:02
【问题描述】：

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

例如，要仅获取最后一个孩子，则div:nth-last-child(1)。

【问题讨论】：

标签： css-selectors css

【解决方案1】：

您可以将negation pseudo-class :not() 用于:last-child pseudo-class。引入 CSS 选择器 Level 3，它在 IE8 或更低版本中不起作用：

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

【讨论】：

这是按原样使用的吗？第一个冒号前没有任何内容？
您可以将其附加到您的普通基本选择器（在 OP 示例中为div）
对于那些使用 SASS 的人，您可以在要影响的元素内使用 &:not(:last-child) { /* styles * }。

【解决方案2】：

简单点：

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

重新初始化最后一个

例如在 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）

【讨论】：

至少对我来说，这有一种不好的代码味道。您故意将 css 规则应用于您不希望它的元素，然后才尝试蛋糕另一层以撤消它。对我来说，这是一种糟糕的代码气味。我担心这种 css 编码会导致越来越难以维护 css。换句话说，您正在构建意大利面条式代码 css。
这也可以工作，但问题是当你有许多css样式（如边框、颜色、字体大小等）时，你需要再次将css样式初始化为:last-child。所以合适的解决方案是使用 :not(:last-child)

【解决方案3】：

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

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

CSS Tricks 的 Chris Coyier 为此写了一个很好的 :nth tester。

【讨论】：

Mozilla对:nth-last-child的定义很好
有人说:not伪很贵。因此，尽可能避免它可能是个好主意。
@Neurotransmitter - 参考？我很想知道“某些人”是如何得出这个结论的。
@JohnChurchill 如果你仔细想想，很清楚：:not 遍历整个级联以确定它是否适用（双关语），所以它的设计成本很高。在任何你能想到的情况下，你都可以轻松避免它。

【解决方案4】：

IE9 来了，就更简单了。但很多时候，您可以将问题切换到需要 :first-child 并设置元素另一侧的样式（IE7+）。

【讨论】：

【解决方案5】：

将 nick craver 的解决方案与 selectivizr 一起使用允许跨浏览器解决方案 (IE6+)

【讨论】：

【解决方案6】：

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

此代码应将样式应用于所有

除了最后一个孩子

【讨论】：

【解决方案7】：

要查找最后的元素，请使用

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

【讨论】：

【解决方案8】：

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 */
    },
  },
};

【讨论】：

【解决方案9】：

css3 中有一个:not 选择器。使用 :not() 和 :last-child 来选择除最后一个之外的所有孩子。例如，要选择 ul 中除最后一个 li 之外的所有 li，请使用以下代码。

ul li:not(:last-child){   }

【讨论】：

【解决方案10】：

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

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

示例：

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

【讨论】：