我如何使用CSS3选择器选择除最后一个孩子以外的所有孩子?
例如,仅获取最后一个孩子将是div:nth-last-child(1)
。
#1楼
Nick Craver的解决方案有效,但您也可以使用以下方法:
:nth-last-child(n+2) { /* Your code here */ }
CSS Tricks的Chris Coyier为此做了一个不错的:nth测试人员 。
#2楼
您可以对:last-child
伪类使用否定伪类:not()
。 正在被引入CSS选择器3级,它不适用于IE8或更低版本:
:not(:last-child) { /* styles */ }
#3楼
当IE9出现时,它将变得更加容易。 但是,在很多时候,您可以将问题切换到要求:first-child的样式,并设置元素的另一面(IE7 +)的样式。
#4楼
简单点:
您可以将样式应用于所有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)
#5楼
从最后查找元素,使用
<style>
ul li:nth-last-of-type(3n){ color:#a94442} /**/
</style>
来源:oschina
链接:https://my.oschina.net/u/3797416/blog/3190600