首頁 > web前端 > css教學 > 主體

css 偽類有哪些

青灯夜游
發布: 2023-01-07 11:42:08
原創
8791 人瀏覽過

css偽類別有:「:link」、「:visited」、「:hover」、「:active」、「:focus」、「:lang()」、「not()」、「 :root」、「:first-child」、「:last-child」、「:empty」等等。

css 偽類有哪些

本教學操作環境:windows7系統、CSS3版、Dell G3電腦。

CSS偽類別是用來添加一些選擇器的特殊效果,是用於已有元素處於某種狀態時為其添加對應的樣式,這個狀態是根據用戶行為而動態變化的。

例如:當使用者懸停在指定元素時,可以透過:hover來描述這個元素的狀態,雖然它和一般css相似,可以為已有元素添加樣式,但是它只有處於DOM樹無法描述的狀態下才能為元素添加樣式,所以稱為偽類。

在感覺上偽類別可以是動態的,當使用者和文件互動的時候一個元素可以取得或失去一個偽類別。例外的是":first-child"能透過文檔樹推斷出來,":lang"在某些情況下也在從文檔樹推斷出來。

由此可以看出,它的功能和class有些類似,但它是基於文件之外的抽象,所以叫偽類。

css 偽類選擇器清單

###CSS3 偽類別選擇子E:nth -last-child(n) 符合父元素的倒數第n個子元素E。 E:first-of-typeCSS2無CSS3 偽類別選擇子E:first-of- type 符合同類型中的第一個同級兄弟元素E。 E:last-of-typeCSS3#無CSS3 偽類別選擇子E:last-of- type 符合同類型中的最後一個同級兄弟元素E。 E:only-of-typeCSS3無CSS3 偽類別選擇子E:only-of- type,匹配同類型中的唯一的一個同級兄弟元素E。 E:nth-of-type(n)CSS3無E:nth-last-of-type(n)E:emptyE:checkedE:enabledE:disabledE:target@page:first@page:left##CSS2 偽類別選擇符@page: left 置頁面容器位於裝訂線左邊的所有頁面所使用的樣式。僅用於@page規則@page:rightCSS2無CSS2 為物件選擇符@page: right 設定頁面容器位於裝訂線右邊的所有頁面所使用的樣式。僅用於@page規則(學習影片分享: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 -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

以上是css 偽類有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!