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

最新推荐文章于 2021-08-06 13:19:02 发布

aa88342249

最新推荐文章于 2021-08-06 13:19:02 发布

阅读量179

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/jhti/archive/2010/11/16/1878333.html

版权

本以为IE 6基本不支持伪类的，不过今天看到:first-letter和:first-line也可在IE 6下使用，于是测试了下，却没看出效果。

检查了半天原因，发现: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>

转载于:https://www.cnblogs.com/jhti/archive/2010/11/16/1878333.html

关注