應用不是：最後一個孩子第

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

隨着我們選擇我們的div第一$(div)，在.find('.article')我們發現所有的div裏面的文章。然後用.last()我們選擇所選文章的最後一篇文章。與.css我們將樣式添加到該文章。

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

Answer 3

:last-child任何一個孩子，而不僅僅是article元素相匹配。 ul是最後一個孩子，因此每個article都與您的選擇器匹配。你想用:last-of-type代替：

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

Answer 4

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

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

Fiddle