第一个孩子的bug？

Question

我正在尝试使用p:first-child:first-letter创建一个Drop Cap，但我遇到了问题。如果我将我的样式应用于下面的标记，第一段中第一个字母的首字下沉可以正常工作：

<div class="wrapper">
<p>Some paragraph goes here...text text</p> (works good!)
<p>Next paragraph goes here...more text</p>
<p>Next paragraph goes here...more text</p>
</div>

但是，如果我在第一段之前添加左浮动的图像，它会中断。我的掉落帽不再适用于此：

<div class="wrapper">
<img src="some-image.jpg" /> (causes it to break?)
<p>Some paragraph goes here...text text</p> (doesn't work)
<p>Next paragraph goes here...more text</p>
<p>Next paragraph goes here...more text</p>
</div>

这是我的下降帽css：

.wrapper p:first-child:first-letter {
    float: left;
    color: #007ac3;
    padding: 4px 5px 0 0;
    font: 75px/50px 'Novecento', Arial, serif;
}

所以，如果我在段落前面添加另一个元素，我会有点难过。它不是另一个段落所以它应该有效，除非有一个我不知道的规则。有什么想法吗？

Answer 1

要定位第一个p元素，请使用:first-of-type：

.wrapper p:first-of-type:first-letter {
    float: left;
    color: #007ac3;
    padding: 4px 5px 0 0;
    font: 75px/50px 'Novecento', Arial, serif;
}

:first-child仅针对第一个孩子。如果元素不是第一个子元素，则不会选中它。