爲什麼第一個孩子/最後一個孩子不能在blockquote上工作

這可能是一個愚蠢的問題，但爲什麼first-child/lastchild不能在blockquotes上工作？爲什麼第一個孩子/最後一個孩子不能在blockquote上工作

CSS

p { margin: 0 0 1.6em 0; } 
blockquote { margin: 0; padding: 0 25px 1em; background-color: #CCC; border-left: 5px solid #333; } 
blockquote:first-child { padding-top: 25px; color: red; } 
blockquote:last-child { padding-bottom: 25px; margin-bottom: 1em; color: yellow; }

HTML

<div> 
    <p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p> 
    <blockquote>Lorem ipsum dolor sit amet</blockquote> 
    <blockquote>Lorem ipsum dolor sit amet</blockquote> 
    <blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote> 
    <p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p> 
    <blockquote>Lorem ipsum dolor sit amet</blockquote> 
    <blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote> 
</div>

更新：我想在這個例子是什麼：

BLOCKQUOTE 1：紅色
塊引用2：默認顏色
BLOCKQUOTE 3：黃色
BLOCKQUOTE 4：紅
BLOCKQUOTE 5：黃

JS-Fiddle

來源

2014-01-28 klaasjansen

您正在尋找:first-of-type/:last-of-type。正如僞類的名稱所暗示的那樣，這將設計類型的第一個/最後一個元素。

UPDATED EXAMPLE HERE

blockquote:first-of-type { 
    padding-top: 25px; 
} 
blockquote:last-of-type { 
    padding-bottom: 25px; 
    margin-bottom: 1em; 
}

來源

2014-01-28 19:19:08

+1，我忘了這個，比使用更簡單... –

@dystroy 1+也是你的;）'：not'運作良好。 –

謝謝，我不知道：第一類僞類。但這不完全是我需要的（查看更新後的問題）。 – klaasjansen

因爲他們不是第一個孩子或最後一個孩子，這裏的第一個孩子是p元素。

要定位第一，你可以做

:not(blockquote) + blockquote {

來源

2014-01-28 19:18:50

是否有目標的方式在第一和最後一個塊引用在CSS一排？（我堅持這個代碼，由於我的wysiwyg編輯器） – klaasjansen

對不起，我不明白。你可以給我一個例子嗎？ – klaasjansen

http://jsfiddle.net/G8Kvg/2/這不起作用 – klaasjansen

爲什麼第一個孩子/最後一個孩子不能在blockquote上工作

回答

相關問題