<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="簡單的XHTML頁面" />
<meta name="Description" content="這是一個簡單的XHTML頁面" />
<title>簡單的XHTML頁面</title>
<style type="text/css">
#div1:first-letter{
font-size:200%;
}
#div1:first-line{
color:red;
}
</style>
</head>
<body>
<div id="div1">
第一行內(nèi)容，注意這一行的第一個字。<br/>
第二行內(nèi)容
</div>
</body>
</html>
下面是IE6和IE7的顯示效果截圖：
圖：IE6不支持“偽對象”，而IE7已經(jīng)支持
關(guān)于“:first-line”對特別注意
-
偽對象“:first-line”指定是第一行，而不是第一段。行的劃分是利用<br/>標簽，而“段”的劃分是利用<p>標簽�！�:first-line”并不會對<p>標簽劃分的段落使用樣式。
-
這個比較變態(tài)——因為容器的寬度過小，而使得第一行“放”不下，而“擠”到第二行的內(nèi)容，將失去偽對象“:first-line”設置的樣式 -_-b... 看下面的截圖，將更有助于你的理解。依然是上面的那個示例，但是當將瀏覽器的寬度縮小一定程度時，第一行的文字被“擠”到了第二行，同時失去了偽對象“:first-line”指定的樣式（紅色字體顏色）。
圖：被“擠”下來的文字，將失去偽對象“:first-line”設置的樣式
后記
這些IE6不支持，IE7才支持的高級選擇符，也是搞定IE6和IE7網(wǎng)頁兼容性的有效手段之一。甚至一些朋友直接誤以為這些高級選擇符，就是CSS hack的一種。其實，這些不是CSS hack，而是一種改進，一種升級。所以，使用“高級選擇符”手段達到IE6和IE7的兼容性的方法，可以放心的使用，不會有css hack的后顧之憂，在微軟后續(xù)的瀏覽器中一定會支持的。
開動自己的腦袋，利用這些豐富的選擇符，將能夠?qū)崿F(xiàn)更多，更強大的效果。IE7只是將舞臺幫我們搭好了，如何唱一出好戲，則是靠大家一起的努力了。
IE7改進了很多的東西，“更豐富的選擇符支持”只是其中比較耀眼的一顆而已。對于其他的，我將在后續(xù)的《IE7的web標準之道》系列文章中繼續(xù)和大家一起探討，還請各位朋友以后多多指教。
本文鏈接：http://m.95time.cn/tech/web/2008/6101.asp 
出處：
責任編輯：bluehearts
上一頁 更豐富的CSS選擇符 [5] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
第 1 頁 
第 6 頁 更豐富的CSS選擇符 [6]
