|
在CSS中，模式（pattern）匹配規(guī)則決定那種樣式規(guī)則應(yīng)用于文檔樹(document tree)的哪個元素。這些模式叫著選擇符（selector)。 一條CSS規(guī)則(rule)是選擇器{屬性:值;屬性:值;}（selector {property:value;property1:value2;}），即選擇符決定了{(lán)}中的聲明(declaration)匹配哪個元素。
在CSS2.1中的選擇符語法見下圖，由語法形成了各種選擇符。
點(diǎn)擊放大
類：在HTML中當(dāng)表現(xiàn)class屬性的時候，人們可以用點(diǎn)（.）號來作為~=號的一個替代選擇，所以div.value等同于div[class~=value]。此時.value只能嚴(yán)格的應(yīng)用于HTML中的class屬性，所以此類選擇符叫類選擇符。
在CSS2.1中樣式通常依附與一個元素在文檔樹中的位置，這個簡單的模型對于許多情況來說是足夠的，但是一些常見的版式狀態(tài)不能應(yīng)用于文檔樹的結(jié)構(gòu)。例如，在HTML中，沒有元素能夠引用一個段落的第一行，所以也沒有簡單的CSS選擇符應(yīng)用它。
所以，CSS引進(jìn)了偽類(pseudo-class)和偽元素(pseudo-element)來允許基于文檔樹意外信息的格式化。
偽類：偽類對元素進(jìn)行分類是基于特征(characteristics)而不是它們的名字、屬性或者內(nèi)容；原則上特征是不可以從文檔樹上推斷得到的。在感覺上偽類可以是動態(tài)的，當(dāng)用戶和文檔進(jìn)行交互的時候一個元素可以獲取或者失去一個偽類。例外的是":first-child"能通過文檔樹推斷出來，":lang"在一些情況下也在從文檔樹中推斷出來。
偽類有：:first-child ，:link:，vistited，:hover:，active:focus，:lang
偽元素：偽元素是創(chuàng)造關(guān)于文檔語言能夠指定的文檔樹之外的抽象。例如文檔語言不能提供訪問元素內(nèi)容第一字或者第一行的機(jī)制。偽元素允許設(shè)計師引用它們，否則這是難以辦到的。偽元素還提供樣式設(shè)計師給在源文檔中不存在的內(nèi)容分配樣式（例如：:before和:after能夠訪問產(chǎn)生的內(nèi)容）。
偽元素有：:first-line，:first-letter，:before，:after （在蘇沈小雨編的CSS2.0中文手冊中把:first-line，:first-letter列為偽類應(yīng)該是理解上的錯誤）
偽類和偽元素都不出現(xiàn)在源文件和文檔樹中。
總結(jié)上面可以知道：
- 類選擇器可以看著屬性選擇器在HTML應(yīng)用中的一種快捷方式，從邏輯和功能上理解有傳統(tǒng)類的含義，其被HTML元素預(yù)定義的屬性class引用，所以叫著類選擇器。
- 偽類可以獨(dú)立于文檔的元素來分配樣式，且可以分配給任何元素，邏輯上和功能上類類似，但是其是預(yù)定義的、不存在于文檔樹中且表達(dá)方式也不同，所以叫偽類。
- 偽元素所控制的內(nèi)容和一個元素控制的內(nèi)容一樣，但是偽元素不存在于文檔樹中，不是真正的元素，所以叫偽元素。
Refer：http://www.w3.org/TR/CSS21/selector.html
點(diǎn)擊放大
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2689626-1-1.html
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
