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

Question

我想为4到n-1的子div应用特定样式.i能够从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;
}

Fiddle Demo

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;
}

<强> WORKING DEMO

希望这有帮助。

Answer 4

对于未来的读者：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;