css中偽類和偽元素有哪些區(qū)別
這篇文章將為大家詳細(xì)講解有關(guān)css中偽類和偽元素有哪些區(qū)別，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)公司專注于尼開遠(yuǎn)企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城建設(shè)。尼開遠(yuǎn)網(wǎng)站建設(shè)公司,為尼開遠(yuǎn)等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
偽類用于選擇DOM樹之外的信息，或是不能用簡單選擇器進(jìn)行表示的信息。前者包含那些匹配指定狀態(tài)的元素，比如:visited，:active；后者包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child，:first-of-type，:target。
（相當(dāng)于一個(gè)特殊的class選擇器，用來添加一些特殊效果）
偽元素為DOM樹沒有定義的虛擬元素。不同于其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內(nèi)容。比如::before表示選擇元素內(nèi)容的之前內(nèi)容，也就是""；::selection表示選擇元素被選中的內(nèi)容。
（相當(dāng)于一個(gè)特殊的元素（p、span），可以用來存放一些特殊樣式或者內(nèi)容）
在CSS3中，偽類與偽元素在語法上也有所區(qū)別，偽元素修改為以::開頭。但因?yàn)闅v史原因，瀏覽器對(duì)以:開頭的偽元素也繼續(xù)支持，但建議規(guī)范書寫為::開頭。
偽類
| Selector | Meaning | CSS |
|---|---|---|
| :active | 選擇正在被激活的元素 | 1 |
| :hover | 選擇被鼠標(biāo)懸浮著元素 | 1 |
| :link | 選擇未被訪問的元素 | 1 |
| :visited | 選擇已被訪問的元素 | 1 |
| :first-child | 選擇滿足是其父元素的第一個(gè)子元素的元素 | 2 |
| :lang | 選擇帶有指定 lang 屬性的元素 | 2 |
| :focus | 選擇擁有鍵盤輸入焦點(diǎn)的元素 | 2 |
| :enable | 選擇每個(gè)已啟動(dòng)的元素 | 3 |
| :disable | 選擇每個(gè)已禁止的元素 | 3 |
| :checked | 選擇每個(gè)被選中的元素 | 3 |
| :target | 選擇當(dāng)前的錨點(diǎn)元素 | 3 |
| :first-of-type | 選擇滿足是其父元素的第一個(gè)某類型子元素的元素 | 3 |
| :last-of-type | 選擇滿足是其父元素的最后一個(gè)某類型子元素的元素 | 3 |
| :only-of-type | 選擇滿足是其父元素的唯一一個(gè)某類型子元素的元素 | 3 |
| :nth-of-type(n) | 選擇滿足是其父元素的第n個(gè)某類型子元素的元素 | 3 |
| :nth-last-of-type(n) | 選擇滿足是其父元素的倒數(shù)第n個(gè)某類型的元素 | 3 |
| :only-child | 選擇滿足是其父元素的唯一一個(gè)子元素的元素 | 3 |
| :last-child | 選擇滿足是其父元素的最后一個(gè)元素的元素 | 3 |
| :nth-child(n) | 選擇滿足是其父元素的第n個(gè)子元素的元素 | 3 |
| :nth-last-child(n) | 選擇滿足是其父元素的倒數(shù)第n個(gè)子元素的元素 | 3 |
| :empty | 選擇滿足沒有子元素的元素 | 3 |
| :in-range | 選擇滿足值在指定范圍內(nèi)的元素 | 3 |
| :out-of-range | 選擇值不在指定范圍內(nèi)的元素 | 3 |
| :invalid | 選擇滿足值為無效值的元素 | 3 |
| :valid | 選擇滿足值為有效值的元素 | 3 |
| :not(selector) | 選擇不滿足selector的元素 | 3 |
| :optional | 選擇為可選項(xiàng)的表單元素，即沒有“required”屬性 | 3 |
| :read-only | 選擇有"readonly"的表單元素 | 3 |
| :read-write | 選擇沒有"readonly"的表單元素 | 3 |
| :root | 選擇根元素 | 3 |
偽元素
Selector Meaning CSS ::first-letter 選擇指定元素的第一個(gè)單詞 1 ::first-line 選擇指定元素的第一行 1 ::after 在指定元素的內(nèi)容前面插入內(nèi)容 2 ::before 在指定元素的內(nèi)容后面插入內(nèi)容 2 ::selection 選擇指定元素中被用戶選中的內(nèi)容 3
:before和::before的區(qū)別
二者寫法是等效的，都表示偽元素。
:before是CSS2的寫法，::before是CSS3的寫法。
:before的兼容性比::before兼容性好，但是H5開發(fā)中建議使用::before
注意：
偽元素要配合content屬性一起使用
偽元素不會(huì)出現(xiàn)在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
偽元素的特效通常要使用:hover偽類樣式來激活
.test:hover::before { /* 這時(shí)animation和transition才生效 */ }關(guān)于css中偽類和偽元素有哪些區(qū)別就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
文章名稱：css中偽類和偽元素有哪些區(qū)別
本文鏈接：http://m.jiaotiyi.com/article/ipceds.html