如何选择元素中除最后一个孩子以外的所有孩子?

我如何使用CSS3选择器选择除最后一个孩子以外的所有孩子?

例如,要只得到最后一个孩子,将是div:nth-last-child(1)

樱小胖Mandy2020/03/20 13:18:27

Nick Craver的解决方案有效,但您也可以使用以下方法:

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

CSS Tricks的Chris Coyier为此做了一个不错的:nth测试人员

HarryGreen前端2020/03/20 13:18:27

当IE9出现时,它将变得更加容易。但是,在很多时候,您可以将问题切换到要求:first-child的样式,并设置元素的另一面(IE7 +)的样式。

逆天DavaidLEY2020/03/20 13:18:27

从最后查找元素,使用

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>
斯丁前端2020/03/20 13:18:27

简单点:

您可以将样式应用于所有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)
LGil2020/03/20 13:18:27

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

Stafan路易2020/03/20 13:18:27

您可以使用否定伪类:not():last-child伪类被介绍为CSS Selectors Level 3,它在IE8或更低版本中不起作用:

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