html - css 首字母排除其他标签

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 > F - Matches any F element that is a child of an element E.

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 确实计算 第一个子元素的第一个字母是相同的作为在其内部遇到的第一个字母，包括子元素(当没有前面的文本时)。