Question

我有以下标记

<div>
  <article>article 1</article>
  <article>article 2</article>
  <article>article 3</article>
  <article>article 4</article>
  <ul class="pagination">
    <li>Page 1</li>
    <li>Page 2</li>
  </ul>
</div>

我尝试为每篇文章应用底部边框，但不是最后一篇：

article:not(:last-child) {
  border-bottom: 8px solid #404040;
}

但是有了这个，我在上一篇文章中得到了一个边框。

如果我删除了UL，那么上一篇文章就没有边框。

这很奇怪，因为我只将这种风格应用于文章。

我该如何解决这个问题？

谢谢你，米格尔

Answer 1

应该是last-of-type而不是last-child。

article:not(:last-of-type) {
  border-bottom: 8px solid #404040;
}

DEMO here.

Answer 2

:last-child匹配任何孩子，而不只是article元素。 ul是最后一个孩子，因此每个article都会匹配您的选择器。您想要使用:last-of-type代替：

article:not(:last-of-type) {
    border-bottom: 8px solid #404040;
}

Answer 3

使用last-of-type代替last-child

article:not(:last-of-type) {
  border-bottom: 8px solid #404040;
}

Fiddle

Answer 4

我们选择$(div)第一个div，.find('.article')我们会在div内找到所有文章。然后使用.last()我们从所选文章中选择最后一篇文章。使用.css我们将该样式添加到该文章中。

$('div').find('.article').last().css('border-bottom','none');

不申请：最后一个孩子到文章

4 个答案: