CSS脑筋急转弯:如何在列表中更改最后一个类的结果

Question

我在div中显示搜索结果：

<div id="results">
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
  <div class="list-item">[Text]</div>
</div>

列表项的数量是可变的。我希望在除最后一个结果之外的所有列表项类上都有border-bottom: 1px solid #000;。在CSS中有没有办法做到这一点，或者我需要使用JS吗？

Answer 1

使用:not和:last-child

.list-item:not(:last-child) {
  border-bottom:1px solid #000;
}

它的工作和它的优雅：http://jsfiddle.net/3Znbu/

Answer 2

使用:last-child选择器。

.list-item {
  border-bottom:1px solid #000;
}

.list-item:last-child {
  border-bottom: 0;
}

正如Mooseman指出的那样，它不能在IE8或更低版本上工作，所以如果你需要IE8支持，我建议使用jQuery解决方案，或者使用:first-child选择器，它支持IE7+。

jQuery

$('.list-item:not(:last-child)').css('border-bottom','1px solid #000');

：第一子

.list-item {
  border-top:1px solid #000;
}

.list-item:first-child {
  border-top: 0;
}

Answer 3

#results .list-item:last-child {
   border-bottom: none;
}