?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
E:first-letter/E::first-letter { sRules }
此偽對象僅作用于塊對象。內(nèi)聯(lián)對象要使用該偽對象,必須先將其設(shè)置為塊級對象。
該偽類常被用來配合font-size屬性和float屬性制作首字下沉效果。
IE6在使用該選擇符時有個顯式的BUG:選擇符與包含規(guī)則的花括號之間不能緊挨著,需留有空格或換行。同時還存在該BUG的選擇符包括:E:first-line
CSS3將偽對象選擇符(Pseudo-Element Selectors)前面的單個冒號(:)修改為雙冒號(::)用以區(qū)別偽類選擇符(Pseudo-Classes Selectors),但以前的寫法仍然有效。
即E:first-letter可轉(zhuǎn)化為E::first-letter
Selector | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0 #1 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
7.0+ | ||||||||
::first-letter | 6.0 | |||||||
7.0-8.0 #2 | ||||||||
9.0+ | ||||||||
E:first-letter選擇符不能緊挨著規(guī)則集大括號,需留有空格或換行。
本質(zhì)上并不支持偽元素的雙冒號(::)寫法,而是忽略掉了其中的一個冒號,仍以單冒號來解析,所以等同變相支持了E::first-letter。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>E::first-letter_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> h1{font-size:16px;} p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;} p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;} p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;} </style> </head> <body> <h1>雜志常用的首字下沉效果</h1> <p>今天,陽光明媚,晴空萬里,非常適合戶外活動,如踏青、遠足之類的。長期坐在辦公室的同學們要多注意運動。</p> </body> </html>
點擊 "運行實例" 按鈕查看在線實例