0

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

<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>

但是，如果我在第一段之前添加一个带有左浮动的图像，它就会中断。我的 Drop Cap 不再适用于此：

<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;
}

所以，如果我在段落前面添加另一个元素，为什么它会中断，我有点难过。这不是另一段，因此除非有我不知道的规则，否则它应该可以工作。有任何想法吗？

4

1 回答 1

3

要定位第一个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针对唯一的第一个孩子。如果元素不是第一个子元素，则不会被选中。

于 2013-10-24T21:14:55.043 回答