最精简代码CSS 实现WordPress 首字放大，兼容所有浏览器！

AI摘要：实现WordPress首字放大，可兼容所有浏览器。通过CSS添加样式标签，代码简洁实用，修改简单。针对文章头部图片或广告导致首字放大失效问题，可增加div包裹文章内容，调整CSS实现效果。

首字放大效果也可以叫做首字下沉，最早常见于报纸杂志，然后慢慢被人用在了网站上，教程方法其实很早就有人讨论了，添加方法也各式各样，大致分为下面三种：

1.定义好CSS样式标签，然后手动给第一个字添加标签

1a.延伸一点就是给编辑器增加一个快捷标签按钮
优点：此方法是最有效最彻底的，但比较麻烦

2.通过Js 给文章第一个字添加样式标签

优点：现在很流行用js添加，确实js灰常强大，不过因为需要js加载匹配，所以首字放大效果会有延时

3.通过Css 给文章第一个字添加样式标签

优点：代码简洁，实用性强，修改简单，经过修改优化后就是我现在使用的方法

然后我们再来了解下WordPress 文章页面区域的基本架构大致如下：

<div id="context">

我是一篇演示文档的首行开头

我是正文第2段落

我是正文第3段落

我是正文第n段落

</div>

除手动添加样式标签外，通过JS和CSS 添加方法都是给?div标签?"context"里面的第一个“P”标签赋值，我现在使用的代码如下，你添加到自己的主题CSS里面即可（但需要留意下上面的标签是否一样，个别另类的主题可能会有不同）

.context > p:first-child:first-letter {
color: #8844BB;
float: left;
font-size: 2.1em;
font-weight: bold;
line-height: 1em;
margin: -6px?3px;
position: relative;
}

注：我不喜欢首字下沉占多行的效果，如果你需要那个效果，可以修改margin的值（例如改为：margin: 3px;）

进阶篇：
如果你文章头部加了图片或者横幅广告的话，你会发现首字放大效果失效了，为什么呢？其实你自己分析上面的代码会发现，它是给"context"里面的第一个“P”标签赋值，从而让第一个给第一个字符增加样式，而启用了文章头部加了图片或者横幅广告的话，第一个字符就变成了“<”，自然无法看到想要的效果。
添加方法也很简单，我们增加一个div单独包裹着文章内容即可，例如下面的例子：

<div id="context">
其实你可以把我理解为一个图片或一个广告，O(∩_∩)O~
<div id="henghengzhu">
我是一篇演示文档的首行开头
我是正文第2段落
我是正文第3段落
我是正文第n段落
</div>
</div>

此时对应css代码则改为：

.henghengzhu > p:first-child:first-letter {
color: #8844BB;
float: left;
font-size: 2.1em;
font-weight: bold;
line-height: 1em;
margin: -6px?3px;
position: relative;
}