如何使用CSS选择器排除最后两个子元素?

时间:2016-05-15 16:29:45

标签: html css

我想在父级内部的某些div元素下绘制bottom-border,但除了后两位,知道子元素的数量是可更改的:

<div id="parent">
   <div>
One
   </div>
   <div>
Two
   </div>
   <div>
Three
   </div>
   <div>
Four
   </div>
</div>

是否可以选择除最后两个之外的所有子元素?

2 个答案:

答案 0 :(得分:5)

:nth-last-child应该完成这项工作(与:not相结合)。

&#13;
&#13;
#parent >:not(:nth-last-child(-n+2)) {
  border-bottom: solid black 1px;
}
&#13;
<div id="parent">
  <div>
    One
  </div>
  <div>
    Two
  </div>
  <div>
    Three
  </div>
  <div>
    Four
  </div>
  <div>
    Five
  </div>
  <div>
    Six
  </div>
  <div>
    Seven
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:4)

在这种情况下,类似

#parent > div:not(:nth-last-of-type(-n+2)) {
  border-bottom: 1px solid red;
}

JSFiddle