先附上代码:
<!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,需注意该元素是终端块状元素,并特别检查下兼容性