css - 如何在css伪类选择器中排除最后一个孩子

Question

我想为从 4 到 n-1 的子 div 应用特定样式。我能够从 4 到 n 做，但不能排除最后一个 div

这是 jsfiddle http://jsfiddle.net/8WLXX/

.container div:nth-child(n+4)   {     background: red; }

我想要的只是排除最后一个 div。

Answer 1

你可以这样做：

.container div:nth-child(n+4):not(:last-child) {
    background: red;
}

小提琴演示

Answer 2

只需添加:not(:last-child)到选择器：

.container div:nth-child(n+4):not(:last-child)

Answer 3

您也可以使用.container div:nth-child(n+4):last-child

例如，

.container div:nth-child(n+4):last-child{
      background:none;
}

工作演示

希望这可以帮助。

Answer 4

对于未来的读者：

.nth-test div:nth-child(n+4):nth-last-child(n+2) {
  background: red;
}

<div class="nth-test">
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
</div>