[转]:first-letter和:first-line伪类

时间：2010-11-16 来源：jhti

检查了半天原因，发现:first-letter只能作用于display: block的元素，而我测试的是span，默认为inline元素…

此外，IE 6中还有个要注意的问题，由于这个伪类存在连接符，所以后面不能紧跟大括号和逗号等字符，必须用空格分隔开（没想到逗号都不行，太囧了）。如果使用CSS压缩器的，就要特别注意下这个问题了。

最后给段例子：

普通浏览复制代码打印代码关于程序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title> first-letter </title>
<style type="text/css">
p { width: 3em; font-size: 100%; }
#p1:first-letter , #d1 p:first-letter { font-size: 200%; }
#d2 p:first-line { color: red; }
</style>
</head>
<body>
<p id="p1">这是首字下沉</p>
<div id="d1">
<p>这也是首字下沉</p>
</div>
<div id="d2">
<p>这是首行变色</p>
</div>
</body>
</html>