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

Question

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

例如,只获得最后一个孩子div:nth-last-child(1).

Answer 1

您可以使用否定伪类:not()对:last-child伪类.引入CSS选择器级别3,它在IE8或以下版本中不起作用:

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

Answer 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;
    }
}

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

Answer 3

尼克克拉弗的解决方案有效,但您也可以使用:

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

CSS Tricks的Chris Coyier做了一个很好的第n个测试人员.

Answer 4

当IE9来时,它会更容易.很多时候,你可以把问题转换成一个需要:first-child和style元素的另一面(IE7 +).

Answer 5

css3中有一个:not选择器。使用:not()with :last-childinside 选择除最后一个之外的所有子项。例如，要选择除最后一个之外的所有li内容，请使用以下代码。olli

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

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

Answer 6

使用带有selectivizr的 nick craver解决方案可以实现跨浏览器解决方案(IE6 +)

Answer 7

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

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

例子：

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

Answer 8

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

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