为什么第一个孩子/最后一个孩子在blockquote上不起作用答案

【问题标题】：Why does first-child / last-child not work on blockquote为什么第一个孩子/最后一个孩子在blockquote上不起作用
【发布时间】：2014-01-29 04:35:49
【问题描述】：

这可能是一个愚蠢的问题，但为什么 first-child / lastchild 不能处理块引用？

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：红色
blockquote 2：默认颜色
blockquote 3：黄色
blockquote 4：红色
blockquote 5：黄色

JS-Fiddle

【问题讨论】：

标签： html css css-selectors

【解决方案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;
}

【讨论】：

谢谢，我不知道 :first-of-type 伪类。但这并不是我所需要的（请参阅更新的问题）。
@klaasjansen 根据您的更新，您似乎更愿意使用:nth-of-type.. jsfiddle.net/e24tC 它符合新要求，但可能不适用于动态内容。
就像我说的那样，这显然不适用于动态内容。由于 CSS 限制，我建议更改标记并简单地执行 this .. 另一个不需要更改标记的替代方法是 this.. 不是最好的，但我只是展示了一些选项.. :first/:last-@987654333 @虽然解决了最初的问题..
我想我可以用最后一个例子，谢谢！

【解决方案2】：

因为它们不是第一个孩子或最后一个孩子，所以这里的第一个孩子是p 元素。

要定位第一个blockquote，您可以这样做

:not(blockquote) + blockquote {

【讨论】：

有没有办法在 css 中定位第一个和最后一个块引用？（由于我的所见即所得编辑器，我坚持使用此代码）
对不起，我不明白。可以举个例子吗？
@klaasjansen 使用其他答案。我的适用于序列中的第一个（请参阅jsfiddle.net/etJsW），但不允许您定位序列中的最后一个（它的优点是可以让您定位 in a sequence 类型的第一个）。这些是 CSS 还不能很好解决的问题（很快就会好起来的）。