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

CSS选择器 CSS

伽罗理查德

2020-03-20

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

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

第2475篇《如何选择元素中除最后一个孩子以外的所有孩子？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答

樱小胖Mandy 2020.03.20

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

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

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

HarryGreen前端 2020.03.20

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

逆天DavaidLEY 2020.03.20

从最后查找元素，使用

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

斯丁前端 2020.03.20

简单点：

您可以将样式应用于所有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;
    }
}

LGil 2020.03.20

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

Stafan路易 2020.03.20

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android