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解决方案，或者使用支持IE7 +的:first-child选择器。

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

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

3 个答案: