在CSS1和CSS2中對偽類和偽元素的定義沒有太大區(qū)別基矮,都是:開頭。CSS3定義的比較明顯弦牡。
偽類:用于選擇DOM樹上元素不同的狀態(tài)(:visited :link)兼都,或者是DOM上無法用簡單選擇器選擇的元素(:first-child)。(元素本身)偽類用一個:
偽元素:DOM樹上看不到的元素套媚。和元素相關(guān)的內(nèi)容缚态。(元素周邊)偽元素用倆::
偽類
Selector | Meaning | CSS |
---|---|---|
:active | 選擇正在被激活的元素 | 1 |
:hover | 選擇被鼠標懸浮著元素 | 1 |
:link | 選擇未被訪問的元素 | 1 |
:visited | 選擇已被訪問的元素 | 1 |
:first-child | 選擇滿足是其父元素的第一個子元素的元素 | 2 |
:lang | 選擇帶有指定 lang 屬性的元素 | 2 |
:focus | 選擇擁有鍵盤輸入焦點的元素 | 2 |
:enable | 選擇每個已啟動的元素 | 3 |
:disable | 選擇每個已禁止的元素 | 3 |
:checked | 選擇每個被選中的元素 | 3 |
:target | 選擇當前的錨點元素 | 3 |
:first-of-type | 選擇滿足是其父元素的第一個某類型子元素的元素 | 3 |
:last-of-type | 選擇滿足是其父元素的最后一個某類型子元素的元素 | 3 |
:only-of-type | 選擇滿足是其父元素的唯一一個某類型子元素的元素 | 3 |
:nth-of-type(n) | 選擇滿足是其父元素的第n個某類型子元素的元素 | 3 |
:nth-last-of-type(n) | 選擇滿足是其父元素的倒數(shù)第n個某類型的元素 | 3 |
:only-child | 選擇滿足是其父元素的唯一一個子元素的元素 | 3 |
:last-child | 選擇滿足是其父元素的最后一個元素的元素 | 3 |
:nth-child(n) | 選擇滿足是其父元素的第n個子元素的元素 | 3 |
:nth-last-child(n) | 選擇滿足是其父元素的倒數(shù)第n個子元素的元素 | 3 |
:empty | 選擇滿足沒有子元素的元素 | 3 |
:in-range | 選擇滿足值在指定范圍內(nèi)的元素 | 3 |
:out-of-range | 選擇值不在指定范圍內(nèi)的元素 | 3 |
:invalid | 選擇滿足值為無效值的元素 | 3 |
:valid | 選擇滿足值為有效值的元素 | 3 |
:not(selector) | 選擇不滿足selector的元素 | 3 |
:optional | 選擇為可選項的表單元素,即沒有“required”屬性 | 3 |
:read-only | 選擇有"readonly"的表單元素 | 3 |
:read-write | 選擇沒有"readonly"的表單元素 | 3 |
:root | 選擇根元素 | 3 |
偽元素
Selector | Meaning | CSS |
---|---|---|
::first-letter | 選擇指定元素的第一個單詞 | 1 |
::first-line | 選擇指定元素的第一行 | 1 |
::after | 在指定元素的內(nèi)容前面插入內(nèi)容 | 2 |
::before | 在指定元素的內(nèi)容后面插入內(nèi)容 | 2 |
::selection | 選擇指定元素中被用戶選中的內(nèi)容 | 3 |