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