为什么第一个孩子/最后一个孩子不能在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上工作

回答

相关问题