僞類用於選擇DOM樹以外的信息,或是不能用簡單選擇器進行表示的信息。前者包含那些匹配指定狀態的元素,好比:visited
,:active
;後者包含那些知足必定邏輯條件的DOM樹中的元素,好比:first-child
,:first-of-type
,:target
。html
(至關於一個特殊的class選擇器,用來添加一些特殊效果)瀏覽器
僞元素爲DOM樹沒有定義的虛擬元素。不一樣於其餘選擇器,它不以元素爲最小選擇單元,它選擇的是元素指定內容。好比::before
表示選擇元素內容的以前內容,也就是""
;::selection
表示選擇元素被選中的內容。ui
(至關於一個特殊的元素(div、span),能夠用來存放一些特殊樣式或者內容)spa
在CSS3中,僞類與僞元素在語法上也有所區別,僞元素修改成以::
開頭。但由於歷史緣由,瀏覽器對以:
開頭的僞元素也繼續支持,但建議規範書寫爲::
開頭。.net
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) | 選擇知足是其父元素的倒數第n個某類型的元素 | 3 |
:only-child | 選擇知足是其父元素的惟一一個子元素的元素 | 3 |
:last-child | 選擇知足是其父元素的最後一個元素的元素 | 3 |
:nth-child(n) | 選擇知足是其父元素的第n個子元素的元素 | 3 |
:nth-last-child(n) | 選擇知足是其父元素的倒數第n個子元素的元素 | 3 |
:empty | 選擇知足沒有子元素的元素 | 3 |
:in-range | 選擇知足值在指定範圍內的元素 | 3 |
:out-of-range | 選擇值不在指定範圍內的元素 | 3 |
:invalid | 選擇知足值爲無效值的元素 | 3 |
:valid | 選擇知足值爲有效值的元素 | 3 |
:not(selector) | 選擇不知足selector的元素 | 3 |
:optional | 選擇爲可選項的表單元素,即沒有「required」屬性 | 3 |
:read-only | 選擇有"readonly"的表單元素 | 3 |
:read-write | 選擇沒有"readonly"的表單元素 | 3 |
:root | 選擇根元素 | 3 |
僞元素code
Selector | Meaning | CSS |
---|---|---|
::first-letter | 選擇指定元素的第一個單詞 | 1 |
::first-line | 選擇指定元素的第一行 | 1 |
::after | 在指定元素的內容前面插入內容 | 2 |
::before | 在指定元素的內容後面插入內容 | 2 |
::selection | 選擇指定元素中被用戶選中的內容 | 3 |
:before和::before的區別htm
兩者寫法是等效的,都表示僞元素。blog
:before是CSS2的寫法,::before是CSS3的寫法。開發
:before的兼容性比::before兼容性好,可是H5開發中建議使用::beforeget
注意:
僞元素要配合content屬性一塊兒使用
僞元素不會出如今DOM中,因此不能經過js來操做,僅僅是在 CSS 渲染層加入
僞元素的特效一般要使用:hover僞類樣式來激活
.test:hover::before { /* 這時animation和transition才生效 */ }
參考地址:https://www.cnblogs.com/ammyben/p/8012747.html
https://blog.csdn.net/yangxiaoyanger/article/details/79712180