15.2. CSS ::first-letter 伪元素

• ::first-letter伪元素只匹配块类元素的一部分
• 可以应用在::first-letter中的属性包括：font, text-decoration, text-transform, letter-spacing, word-spacing (仅当appropriate), line-height, float, vertical-align (仅当'float'为'none'时), margin, padding, border, color, background

示例

首字母大写特效

p::first-letter
{
	font-size: 4em;
	font-weight: bold;
	border: 1px solid lightblue;
	margin-right: 8px;
}

<p>Dreamdu is web site<br />
Dreamdu is web site<br />
Dreamdu is web site<br />
Dreamdu is web site.</p>

<p>梦之都是一个网站<br />
梦之都是一个网站<br />
梦之都是一个网站<br />
梦之都是一个网站.</p>

CSS ::first-letter 伪元素示例 -- 可以尝试编辑

首字母下沉特效

p::first-letter
{
	font-size: 4em;
	font-weight: bold;
	border: 1px solid blue;
	margin-right: 8px;
	float: left	;
}

<p>Dreamdu is web site<br />
Dreamdu is web site<br />
Dreamdu is web site<br />
Dreamdu is web site.</p>

<p>梦之都是一个网站<br />
梦之都是一个网站<br />
梦之都是一个网站<br />
梦之都是一个网站.</p>

使用了CSS float元素设置段落的第一个字母为左侧漂浮，段落其它元素围绕段落首字母

CSS ::first-letter 伪元素示例 -- 可以尝试编辑

下面的例子显示了互相重叠的伪元素是如何相互作用的

p
{
	color: red;
	font-size: 12px;
}
p::first-letter
{
	color: green;
	font-size: 4em;
}
p:first-line
{
	color: blue;
	font-size: 2em;
}

<p>Dreamdu is web site<br />
Dreamdu is web site<br />
Dreamdu is web site<br />
Dreamdu is web site.</p>

<p>梦之都是一个网站<br />
梦之都是一个网站<br />
梦之都是一个网站<br />
梦之都是一个网站.</p>

从上面的样式表定义可以看出::first-letter元素在::first-line元素之前，后定义的本应覆盖（层叠）先前定义的，但是第一个子母或文字还是显示了::first-letter设置的颜色，而没有显示::first-line设置的颜色

CSS ::first-letter 伪元素示例 -- 可以尝试编辑

浏览器兼容性

• CSS选择符浏览器兼容性索引

• CSS教程

• 15 CSS 伪元素
• 15.1 CSS ::first-line 伪元素
• 15.2 CSS ::first-letter 伪元素
• 15.3 CSS ::before 伪元素