css偽類別有:「:link」、「:visited」、「:hover」、「:active」、「:focus」、「:lang()」、「not()」、「 :root」、「:first-child」、「:last-child」、「:empty」等等。
本教學操作環境:windows7系統、CSS3版、Dell G3電腦。
CSS偽類別是用來添加一些選擇器的特殊效果,是用於已有元素處於某種狀態時為其添加對應的樣式,這個狀態是根據用戶行為而動態變化的。
例如:當使用者懸停在指定元素時,可以透過:hover來描述這個元素的狀態,雖然它和一般css相似,可以為已有元素添加樣式,但是它只有處於DOM樹無法描述的狀態下才能為元素添加樣式,所以稱為偽類。
在感覺上偽類別可以是動態的,當使用者和文件互動的時候一個元素可以取得或失去一個偽類別。例外的是":first-child"能透過文檔樹推斷出來,":lang"在某些情況下也在從文檔樹推斷出來。
由此可以看出,它的功能和class有些類似,但它是基於文件之外的抽象,所以叫偽類。
css 偽類選擇器清單
#Properties 屬性 |
CSS Version 版本 |
Inherit From Parent 繼承性 |
#Description 簡介 |
---|---|---|---|
E:link | #CSS1 | #無 | CSS1 偽類選擇符E:link ,設定超連結a在未被存取前的樣式。 |
E:visited | CSS1 | #無 | CSS1 偽類別選擇子E:visited,設定超連結a在其連結地址已被存取過時的樣式。 |
E:hover | CSS2 | #無 | CSS2/CSS1 偽類別選擇符E:hover,設定元素在其滑鼠懸停時的樣式。 |
E:active | CSS2/CSS1 | #無 | CSS2/CSS1 偽類別選擇符E:active,設定元素在被使用者啟動(在滑鼠點擊與釋放之間發生的事件)時的樣式。 |
E:focus | CSS2/CSS1 | 無 | CSS2/CSS1 偽類別選擇符E:focus,設定元素在成為輸入焦點(該元素的onfocus事件發生)時的樣式。 |
E:lang() | CSS2 | #無 | CSS2 偽類別選擇子E:lang() 符合使用特殊語言的E元素。 |
E:not() | CSS3 | #無 | CSS3 偽類別選擇子E:not() 符合不含s選擇符的元素E。 |
E:root | CSS3 | 無 | CSS3 偽類別選擇子E:root,符合E元素在文件的根元素。 |
E:first-child | CSS2 | #CSS2 偽類別選擇子E:first-child 符合父元素的第一個子元素E。 | |
E:last-child | CSS3 | #無 | CSS3 偽類別選擇子E:last-child 符合父元素的最後一個子元素E。 |
E:only-child | CSS3 | #無 | CSS3 為例選擇符號E:only-child 符合父元素僅有的一個子元素E。 |
E:nth-child(n) | CSS3 | 無 | CSS3 偽類別選擇子E:nth-child (n) 符合父元素的第n個子元素E。 |
E:nth-last-child(n) | CSS3 | 無 | ##CSS3 偽類別選擇子E:nth -last-child(n) 符合父元素的倒數第n個子元素E。|
CSS2 | 無 | CSS3 偽類別選擇子E:first-of- type 符合同類型中的第一個同級兄弟元素E。 | |
CSS3 | #無 | CSS3 偽類別選擇子E:last-of- type 符合同類型中的最後一個同級兄弟元素E。 | |
CSS3 | 無 | CSS3 偽類別選擇子E:only-of- type,匹配同類型中的唯一的一個同級兄弟元素E。 | |
CSS3 | 無 | ##CSS3 偽類別選擇子E:nth -of-type(n),匹配同類型中的第n個同級兄弟元素E。 | |
CSS3 | 無 | CSS3 偽類別選擇子E :nth-last-of-type(n) 符合同類型中的倒數第n個同級兄弟元素E。 | |
CSS3 | #無 | CSS3 偽類別選擇子E:empty 符合沒有任何子元素(包括text節點)的元素E。 | |
CSS3 | #無 | CSS3 偽類別選擇符E:checked 符合使用者介面上處於選取狀態的元素E。 (用於input type為radio與checkbox 的form元素) | |
CSS3 | #無 | #CSS3 偽類別選擇符E:enabled 匹配使用者介面上處於可用狀態的元素E。 | |
CSS3 | #無 | CSS3 偽類別選擇子E:disabled 符合使用者介面上處於停用狀態的元素E。 | |
CSS3 | #無 | CSS3 偽類別選擇子E:target 符合相關URL指向的E元素。 | |
CSS2 | #無 | CSS2 偽類別選擇符@page:first 設定頁面容器第一頁使用的樣式。只用於@page規則 | |
CSS2 | 無 | ##CSS2 偽類別選擇符@page: left 置頁面容器位於裝訂線左邊的所有頁面所使用的樣式。僅用於@page規則@page:right | |
無 | CSS2 為物件選擇符@page: right 設定頁面容器位於裝訂線右邊的所有頁面所使用的樣式。僅用於@page規則 |
以上是css 偽類有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!