偽類和偽元素的區(qū)別

starsfun 發(fā)布于2019-08-29 15:09 / 3513人閱讀

摘要：偽元素用于將特殊的效果添加到某些選擇器。因此，偽類與偽元素的區(qū)別在于有沒有創(chuàng)建一個(gè)文檔樹之外的元素。偽類代表了一組兄弟元素中的第一個(gè)元素。偽類的實(shí)質(zhì)就是把某種幻想類關(guān)聯(lián)到某種偽類相關(guān)的元素中。

在css2中是這樣定義二者的：

CSS 偽類用于向某些選擇器添加特殊的效果。

CSS 偽元素用于將特殊的效果添加到某些選擇器。

偽類存在的意義是為了通過選擇器找到那些不存在DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。

第一點(diǎn)講的是獲取不存在與DOM樹中的信息。比如標(biāo)簽的:link、visited等，這些信息不存在與DOM樹結(jié)構(gòu)中，只能通過CSS選擇器來獲取；

第二點(diǎn)講的是獲取不能被常規(guī)CSS選擇器獲取的信息。比如偽類:target，它的作用是匹配文檔(頁面)的URI中某個(gè)標(biāo)志符的目標(biāo)元素。

target:URL 帶有后面跟有錨名稱 #，指向文檔內(nèi)某個(gè)具體的元素。這個(gè)被鏈接的元素就是目標(biāo)元素(target element)。
:target 選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素。

li:first-child類似于

li.first-child 一樣
這個(gè)時(shí)候，被修飾的

元素依然處于文檔樹中。

ul:first-letter類似于


    1
    23

ul:first-letter被修飾的時(shí)候，元素并不處于文檔樹中。

因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個(gè)文檔樹之外的元素。

:first-child CSS偽類代表了一組兄弟元素中的第一個(gè)元素。在level3實(shí)現(xiàn)中，被匹配的元素需要具有一個(gè)父級元素，而在level4實(shí)現(xiàn)中則不需要
:first-child 匹配的是某父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素。

p:first-child，常見的錯(cuò)誤理解是這個(gè)選擇器是選擇p的第一個(gè)元素。

偽類的實(shí)質(zhì)就是把某種幻想類關(guān)聯(lián)到某種偽類相關(guān)的元素中。

:first-of-type 匹配的是該類型的第一個(gè)，類型是指什么呢，就是冒號(hào)前面匹配到的東西，比如 p:first-of-type，就是指所有p元素中的第一個(gè)。這里不再限制是第一個(gè)子元素了，只要是該類型元素的第一個(gè)就行了，當(dāng)然這些元素的范圍都是屬于同一級的，也就是同輩的。同樣類型的選擇器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以這樣去理解。

偽元素

偽元素包括:first-letter, :first-line, :before ,:after等

所有的偽元素都要寫在偽元素選擇器的最后面，如果這樣寫就會(huì)出錯(cuò)，