0

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

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

4

3 回答 3

5

使用CSS 子选择器>。

E > 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比其他浏览器更注重伪类。一个例子是它不将特殊字符算作字母，因此不会对它们应用样式。

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

于 2013-09-19T12:48:28.180 回答
1

您需要选择器的组合：

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

.div > p:first-child:first-letter {
    font-size:40px;
}
于 2013-09-19T12:50:18.533 回答
1

您可以使用：

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

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

于 2013-09-19T12:50:26.970 回答