我如何使用CSS3选择器选择除最后一个孩子以外的所有孩子?
例如,要只得到最后一个孩子,将是div:nth-last-child(1)
。
我如何使用CSS3选择器选择除最后一个孩子以外的所有孩子?
例如,要只得到最后一个孩子,将是div:nth-last-child(1)
。
当IE9出现时,它将变得更加容易。但是,在很多时候,您可以将问题切换到要求:first-child的样式,并设置元素的另一面(IE7 +)的样式。
从最后查找元素,使用
<style>
ul li:nth-last-of-type(3n){ color:#a94442} /**/
</style>
您可以将样式应用于所有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;
}
}
将Nick Craaver的解决方案与selectivizr结合使用可实现跨浏览器解决方案(IE6 +)
您可以使用否定伪类:not()
对:last-child
伪类。被介绍为CSS Selectors Level 3,它在IE8或更低版本中不起作用:
:not(:last-child) { /* styles */ }
Nick Craver的解决方案有效,但您也可以使用以下方法:
CSS Tricks的Chris Coyier为此做了一个不错的:nth测试人员。