html - 为什么第一个 child /最后一个 child 不适用于 blockquote

Question

这可能是一个愚蠢的问题，但为什么 first-child/lastchild 不在 blockquotes 上工作？

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>

更新:在这个例子中我想要什么:

• block 引用 1:红色
• blockquote 2: 默认颜色
• blockquote 3:黄色
• block 引用 4:红色
• block 引用 5:黄色

JS-Fiddle

Answer 1

您正在寻找:first-of-type/:last-of-type .正如伪类的名称所暗示的那样，这将为 type 元素的第一个/最后一个设置样式。

UPDATED EXAMPLE HERE

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