css中偽類/偽元素詳解
一、偽類和偽元素
偽類和偽元素都是用來修飾不在文檔樹中的部分，區別在於，
偽類用於當已有元素處於的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的(如:hover/:active)。
而偽元素則用於創建一些不在文檔樹中的元素，並為其添加樣式(如:before/:after)。
二、常用偽類
|
偽類 |
用法 |
兼容 |
|
: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及更早版本不支持
|
三、常用偽元素
|
偽元素 |
說明 |
兼容 |
|
::first-line |
選擇元素的第一行 |
主流瀏覽器都支持 |
|
::first-letter |
選擇文本塊的第一個字母 |
主流瀏覽器都支持 |
|
::before |
給元素的前面插入內容 |
IE8及更早版本不支持 |
|
::after |
給元素的後面插入內容 |
IE8及更早版本不支持 |
|
::selection |
用來改變瀏覽網頁選中文的默認效果 |
IE8及更早版本不支持 |
|
::placeholder |
::-webkit-input-placeholde ::-moz-placeholder :-ms-input-placeholder 設置一個表單元素的占位文本 |
IE8及更早版本不支持 |
css中偽類/偽元素詳解