Question

我有一个由WordPress生成的页面，其HTML类似于下面的HTML。我希望div的第一个字母具有不同的大小，但当我尝试为p:first-letter添加样式时，所有p的更改大小。我的问题是我无法删除p - 标签，因为它们是自动创建的。

<div class="div">
    <p>Paragraph 1</p> <!-- I need "P" in "Paragraph" in different size -->
    <p>Paragraph 2</p>
    <blockquote><p>Text blockquote</p></blockquote>
</div>

有什么建议吗？

http://jsfiddle.net/hdNDh/

Answer 1

使用CSS child selector >。

E＆gt; F - 匹配作为元素E的子元素的任何F元素。

jsFiddle

.div > p:first-letter {
    font-size:40px;
}

编辑：我们首先误解了您的问题，如果您只需要div的第一个字母，只需在div上设置伪类即可在p上。

jsFiddle

.div:first-letter {
    font-size:40px;
}

Edit2：如下面的评论中所述，为了在FF中工作，您需要：

.div > p:first-child:first-letter {
    font-size:40px;
}

jsFiddle

这看似奇怪/奇怪的行为，所以我有一点看看，似乎Firefox比其他浏览器更特别关于:first-letter伪类。一个例子是它不是count special characters to be letters，因此不会对它们应用样式。

刚刚测试的结果：Firefox 不计算 第一个子元素的第一个字母与第一个字母相同本身遇到包括子元素（即使没有前面的文本），而Chrome 确实计算 第一个子元素的第一个字母是相同的as 在其自身中遇到的第一个字母，包括子元素（当没有前面的文本时）。

Answer 2

您需要选择器的组合：

http://jsfiddle.net/hdNDh/5/

.div > p:first-child:first-letter {
    font-size:40px;
}

Answer 3

您可以使用：

.div > p:first-child::first-letter {
    font-size: 24px;
}

http://jsfiddle.net/hdNDh/2/

css首字母排除其他标签

3 个答案: