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

雨燕双飞 提交于 2020-03-09 17:45:13

我如何使用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>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!