css中僞類/僞元素詳解

1、僞類和僞元素

僞類和僞元素都是用來修飾不在文檔樹中的部分，區別在於，

僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的(如:hover/:active)。

而僞元素則用於建立一些不在文檔樹中的元素，併爲其添加樣式(如:before/:after)。

 

---

 

 

2、經常使用僞類

僞類	用法	兼容
:link	未訪問的連接	主流瀏覽器都支持
:visited	已訪問的連接	主流瀏覽器都支持
:hover	鼠標劃過連接	主流瀏覽器都支持
:active	已選中的連接	主流瀏覽器都支持
:focus	選擇元素輸入後具備焦點	主流瀏覽器都支持，IE8中必須申明<!DOCTYPE>
:enabled	元素可用狀態下	IE8及更早版本不支持
:disabled	元素禁用狀態下	IE8及更早版本不支持
:checked	元素選中狀態下	IE8及更早版本不支持
:first-child	選擇元素的第一個子元素	主流瀏覽器都支持，IE8或更早版本中必須申明<!DOCTYPE>
:last-child	選擇元素的最後一個子元素	IE8及更早版本不支持
:nth-child()	選擇元素的一個或多個特定的子元素	IE8及更早版本不支持
:nth-last-child()	從這個元素的最後一個子元素開始選擇元素的一個或多個特定的子元素	IE8及更早版本不支持
:nth-of-type()	選擇指定的元素	IE8及更早版本不支持
:nth-last-of-type()	從這個元素的最後一個子元素開始選擇指定元素	IE8及更早版本不支持
:first-of-type	選擇一個上級元素下的第一個同類子元素	IE8及更早版本不支持
:last-of-type	選擇一個上級元素下的最後一個同類子元素	IE8及更早版本不支持
:only-child	選擇父級元素下的惟一一個子元素	IE8及更早版本不支持
:only-of-type	選擇父元素下的惟一一個相同類型的子元素	IE8及更早版本不支持
:empty	選擇元素裏面沒有任何內容的元素	IE8及更早版本不支持
:not()	選擇除了某個元素之外的其餘元素	IE8及更早版本不支持
:lang	爲不一樣的語言定義特殊的規則	主流瀏覽器都支持，IE8中必須申明<!DOCTYPE>
:target	設置元素被設置爲錨連接的目標元素時候的樣式	IE8及更早版本不支持
:default	設置表單的默認樣式	IE8及更早版本不支持
:valid	設置有效的表單元素	IE8及更早版本不支持
:invalid	應用於空的必填的,或者驗證失敗的表單	IE8及更早版本不支持
:required	應用於具備required屬性的表單元素	IE8及更早版本不支持
:optional	應用於沒有required屬性的表單元素	IE8及更早版本不支持
:in-range	應用於具備範圍的限制的元素,好比number表單	IE8及更早版本不支持
:out-of-range	與:in-range相反,指定超出範圍時的樣式	IE8及更早版本不支持
:read-only	應用於內容只讀的元素	IE8及更早版本不支持
:read-write	應用於可供用戶修改的元素	IE8及更早版本不支持
:root	指向根元素,即html元素	IE8及更早版本不支持

 

 

---

 

3、經常使用僞元素 

 

僞元素	說明	兼容
::first-line	選擇元素的第一行	主流瀏覽器都支持
::first-letter	選擇文本塊的第一個字母	主流瀏覽器都支持
::before	給元素的前面插入內容	IE8及更早版本不支持
::after	給元素的後面插入內容	IE8及更早版本不支持
::selection	用來改變瀏覽網頁選中文的默認效果	IE8及更早版本不支持
::placeholder	::-webkit-input-placeholde ::-moz-placeholder :-ms-input-placeholder 設置一個表單元素的佔位文本	IE8及更早版本不支持