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

Posted 2023-03-06

【中文标题】如何选择除最后一个子元素之外的元素的所有子元素？

【英文标题】：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)。

【参考方案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)
  ....