伪类元素选择符

先附上代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2012年4月27日</title>
  <meta name="Keywords" content="伪类元素选择符" />
  <meta name="Description" content="" />
  <meta name="author" content="冷海圣 三 QQ：448494242" />
  <meta http-equiv="window-target" content="_top" />
  <meta http-equiv="pragma" content="no-cache" />
  <!--
  <link type="text/css" href="styles/reset.css" rel="stylesheet" />
  <link type="text/css" href="styles/layout.css" rel="stylesheet" />
  -->
  <link rel="shortcut icon" href="images/ico/favicon.ico" type="image/x-icon" />
  <link rel="Bookmark" href="images/ico/favicon.ico" >
  <style type="text/css">
    p:first-line{
        font-weight:bold;
        word-spacing:2px;
        letter-spacing:1px;
    }
    p:first-letter{
        font-size:48px;
    }
    
    span:first-line{
        font-weight:bold;
        word-spacing:2px;
        letter-spacing:1px;
    }
    span:first-letter{
        font-size:48px;
    }
    
    dl:first-line{
        font-weight:bold;
        word-spacing:2px;
        letter-spacing:1px;
    }
    dl:first-letter{
        font-size:48px;
    }
  </style>
</head>
<body>
    <h1>伪类元素选择符</h1>
    
    <p>
        <code>first-letter</code>对首字母进行选择，
        <code>first-line</code>选择了终端块状元素的首行，
        比如这段话即是。
    </p>
    
    <div>
        <span>伪类元素选择符不作用于内联元素。</span>
    </div>
    
    <dl>
        <dt>伪类元素选择符不作用于结构化块状元素。</dt>
    </dl>

</body>
</html>

以上代码测试结果：
1、伪类元素选择符（:first-line）对结构化块状元素，仅在 IE6、7、Opera、Firefox中没效果，在IE8、9、Chrome、Safari中有效果
2、伪类元素选择符（:first-letter）对结构化块状元素，仅在 IE6、7、Firefox中没效果，在IE8、9、Chrome、Opera、Safari中有效果

使用情境：
1、需要给第一个字母或字符特殊处理时，使用伪类选择符:first-letter，需注意该元素是终端块状元素
2、需要对第一行的所有字符做特殊处理，使用味蕾选择符:first-line，需注意该元素是终端块状元素，并特别检查下兼容性

posted @ 2012-04-27 07:33  冷三叔  阅读(416)  评论(0)  编辑  收藏  举报