css中偽類(lèi)和偽元素的區(qū)別有哪些

本篇內(nèi)容介紹了“css中偽類(lèi)和偽元素的區(qū)別有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　偽類(lèi)用于選擇DOM樹(shù)之外的信息，或是不能用簡(jiǎn)單選擇器進(jìn)行表示的信息。前者包含那些匹配指定狀態(tài)的元素，比如:visited，:active；后者包含那些滿(mǎn)足一定邏輯條件的DOM樹(shù)中的元素，比如:first-child，:first-of-type，:target。

　?。ㄏ喈?dāng)于一個(gè)特殊的class選擇器，用來(lái)添加一些特殊效果）

　　偽元素為DOM樹(shù)沒(méi)有定義的虛擬元素。不同于其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內(nèi)容。比如::before表示選擇元素內(nèi)容的之前內(nèi)容，也就是""；::selection表示選擇元素被選中的內(nèi)容。

　?。ㄏ喈?dāng)于一個(gè)特殊的元素（p、span），可以用來(lái)存放一些特殊樣式或者內(nèi)容）

　　在CSS3中，偽類(lèi)與偽元素在語(yǔ)法上也有所區(qū)別，偽元素修改為以::開(kāi)頭。但因?yàn)闅v史原因，瀏覽器對(duì)以:開(kāi)頭的偽元素也繼續(xù)支持，但建議規(guī)范書(shū)寫(xiě)為::開(kāi)頭。

　　偽類(lèi)

　　Selector Meaning CSS

　　:active 選擇正在被激活的元素 1

　　:hover 選擇被鼠標(biāo)懸浮著元素 1

　　:link 選擇未被訪(fǎng)問(wèn)的元素 1

　　:visited 選擇已被訪(fǎng)問(wèn)的元素 1

　　:first-child 選擇滿(mǎn)足是其父元素的第一個(gè)子元素的元素 2

　　:lang 選擇帶有指定lang屬性的元素 2

　　:focus 選擇擁有鍵盤(pán)輸入焦點(diǎn)的元素 2

　　:enable 選擇每個(gè)已啟動(dòng)的元素 3

　　:disable 選擇每個(gè)已禁止的元素 3

　　:checked 選擇每個(gè)被選中的元素 3

　　:target 選擇當(dāng)前的錨點(diǎn)元素 3

　　:first-of-type 選擇滿(mǎn)足是其父元素的第一個(gè)某類(lèi)型子元素的元素 3

　　:last-of-type 選擇滿(mǎn)足是其父元素的最后一個(gè)某類(lèi)型子元素的元素 3

　　:only-of-type 選擇滿(mǎn)足是其父元素的唯一一個(gè)某類(lèi)型子元素的元素 3

　　:nth-of-type(n) 選擇滿(mǎn)足是其父元素的第n個(gè)某類(lèi)型子元素的元素 3

　　:nth-last-of-type(n) 選擇滿(mǎn)足是其父元素的倒數(shù)第n個(gè)某類(lèi)型的元素 3

　　:only-child 選擇滿(mǎn)足是其父元素的唯一一個(gè)子元素的元素 3

　　:last-child 選擇滿(mǎn)足是其父元素的最后一個(gè)元素的元素 3

　　:nth-child(n) 選擇滿(mǎn)足是其父元素的第n個(gè)子元素的元素 3

　　:nth-last-child(n) 選擇滿(mǎn)足是其父元素的倒數(shù)第n個(gè)子元素的元素 3

　　:empty 選擇滿(mǎn)足沒(méi)有子元素的元素 3

　　:in-range 選擇滿(mǎn)足值在指定范圍內(nèi)的元素 3

　　:out-of-range 選擇值不在指定范圍內(nèi)的元素 3

　　:invalid 選擇滿(mǎn)足值為無(wú)效值的元素 3

　　:valid 選擇滿(mǎn)足值為有效值的元素 3

　　:not(selector) 選擇不滿(mǎn)足selector的元素 3

　　:optional 選擇為可選項(xiàng)的表單元素，即沒(méi)有“required”屬性 3

　　:read-only 選擇有"readonly"的表單元素 3

　　:read-write 選擇沒(méi)有"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 選擇指定元素中被用戶(hù)選中的內(nèi)容 3

　　:before和::before的區(qū)別

　　二者寫(xiě)法是等效的，都表示偽元素。

　　:before是CSS2的寫(xiě)法，::before是CSS3的寫(xiě)法。

　　:before的兼容性比::before兼容性好，但是H5開(kāi)發(fā)中建議使用::before

　　注意：

　　偽元素要配合content屬性一起使用

　　偽元素不會(huì)出現(xiàn)在DOM中，所以不能通過(guò)js來(lái)操作，僅僅是在CSS渲染層加入

　　偽元素的特效通常要使用:hover偽類(lèi)樣式來(lái)激活

　　.test:hover::before{/*這時(shí)animation和transition才生效*/}

“css中偽類(lèi)和偽元素的區(qū)別有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！