如何选择一个元素的所有子元素，除了最后一个子元素?

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

例如，只获取最后一个子对象的方法是div:nth-last-child(1)。

306485 次浏览
小开
最佳答案

你可以对:last-child伪类使用否定伪类:not()。引入CSS选择器Level 3后，它在IE8或以下版本中无法工作:

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

当IE9到来时，这将变得更容易。但是很多时候，你可以把问题切换到一个要求:first-child和样式元素的反面(IE7+)。

小开

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

小开

Nick Craver的解决方案是可行的，但你也可以用这个:

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

CSS Tricks的Chris Coyier为此做了一个漂亮的: n测试仪。

小开

简单点:

你可以将你的样式应用到所有的div，并使用:胎重新初始化最后一个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)
小开

要查找last中的元素，请使用

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

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 */
},
},
};
小开 
.nav-menu li:not(:last-child){
// write some style here
}

这段代码应该将样式应用到所有

  • ，除了最后一个子元素

    • 小开

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

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

    如果你在父类的嵌套中使用它，那么最简单的方法是:

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

    例子:

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

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

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

    例子

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

    这将捕获父节点中的所有子DIV


    提交答案