Question

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

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

Answer 1

您可以对negation pseudo-class :not()使用:last-child pseudo-class。引入CSS Selectors Level 3，它在IE8或以下版本中不起作用：

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

Answer 2

简单说明：

您可以将您的风格应用于所有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）

Answer 3

Nick Craver的解决方案有效，但你也可以使用它：

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

CSS Trick的Chris Coyier为此做了一个不错的:nth tester。

Answer 4

当IE9出现时，它会更容易。很多时候，你可以把问题转换成一个需要：first-child和style元素的另一面（IE7 +）。

Answer 5

使用带有selectivizr的nick craver解决方案可以实现跨浏览器解决方案（IE6 +）

Answer 6

.nav-menu li:not(:last-child){
    // write some style here
}

此代码应将样式应用于所有

，除了最后一个孩子

Answer 7

css3中有一个a：not选择器。将：not（）与：last-child一起使用以选择除最后一个孩子以外的所有孩子。例如，要选择ul中除最后一个li外的所有li，请使用以下代码。

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

Answer 8

从最后找到元素，使用

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

Answer 9

尼克·克雷弗（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 */
    },
  },
};

Answer 10

您可以使用此快捷方式。

element:not(:last-child) { 
 // Your Css Style here
}

例如，如果要设置样式的元素是“li”：

li:not(:last-child) { 
  border: '1px solid #233';
}

Answer 11

如何使用CSS选择元素的所有子元素（最后一个子元素除外）？

答案：该代码将起作用

<style>
.parent *:not(:last-child) { 
  color:red;
}
</style>

<div class='parent'>
  <p>this is paragraph</p>
  <h1>this is heading</h1>
  <b>text is bold</b>
</div>

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

11 个答案:

简单说明：