:first-letter和:first-line伪类

2009 5 28 11:41 AM 1850次查看

分类：CSS 标签：CSS

本以为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>

0条评论 你不来一发么↓

    想说点什么呢？