CSS brainteaser:如何在列表中更改最后一个类结果

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