15.2. CSS ::first-letter 伪元素

::first-letter -- CSS ::first-letter 伪元素,匹配第一个字母(中文是第一个文字)的样式
  • 语法: E::first-letter
  • CSS版本:CSS1
  • 引用网址:http://www.dreamdu.com/css/pseudo-element_first-letter/
  • 说明:
    • 匹配第一个字母(中文是第一个文字)的样式
    • 可以用于"词首大写"、"大写字母下沉"等样式,这都是常见的印刷效果
  • first-letter,中文"第一个字母"的意思

示例

首字母大写特效

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-line)的本应覆盖(层叠)先前定义(::first-letter)的,但是第一个字母(文字)却显示了::first-letter设置的颜色,下面示例显示了两者之间的关系。

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

浏览器兼容性

CSS E::first-letter 伪元素浏览器兼容性
选择符 IE6 IE7 IE8 IE9 FF CH OP SA
E::first-letter yes yes yes yes yes yes yes yes


  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都