偽類和偽元素的區別

2022-08-05 12:30:15 字數 1386 閱讀 2950

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

css 偽類用於向某些選擇器新增特殊的效果。css 偽元素用於將特殊的效果新增到某些選擇器。

偽類存在的意義是為了通過選擇器找到那些不存在dom樹中的資訊以及不能被常規css選擇器獲取到的資訊。

第一點講的是獲取不存在與dom樹中的資訊。比如標籤的:link、visited等,這些資訊不存在與dom樹結構中,只能通過css選擇器來獲取;

第二點講的是獲取不能被常規css選擇器獲取的資訊。比如偽類:target,它的作用是匹配文件(頁面)的uri中某個標誌符的目標元素。

target:url 帶有後面跟有錨名稱 #,指向文件內某個具體的元素。這個被連結的元素就是目標元素(target element)。

:target 選擇器可用於選取當前活動的目標元素。

li:first-child類似於

li.first-child 一樣

這個時候,被修飾的元素依然處於文件樹中。

ul:first-letter類似於

ul:first-letter被修飾的時候,元素並不處於文件樹中。

因此,偽類與偽元素的區別在於:有沒有建立一個文件樹之外的元素。

:first-child css偽類代表了一組兄弟元素中的第一個元素。在level3實現中,被匹配的元素需要具有一個父級元素,而在level4實現中則不需要

:first-child 匹配的是某父元素的第一個子元素,可以說是結構上的第一個子元素。

p:first-child,常見的錯誤理解是這個選擇器是選擇p的第一個元素。

偽類的實質就是把某種幻想類關聯到某種偽類相關的元素中。

:first-of-type 匹配的是該型別的第一個,型別是指什麼呢,就是冒號前面匹配到的東西,比如 p:first-of-type,就是指所有p元素中的第一個。這裡不再限制是第一個子元素了,只要是該型別元素的第一個就行了,當然這些元素的範圍都是屬於同一級的,也就是同輩的。同樣型別的選擇器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以這樣去理解。

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

所有的偽元素都要寫在偽元素選擇器的最後面,如果這樣寫就會出錯,

p:first-letter em
這是不允許的。

CSS中的行內元素和塊級元素

我們在構造頁面時,會發現有的元素是上下排列的,而有的則是橫向排列的,這是為啥子呢 看看上圖,我們也沒給他設定啥子屬性咋就不一樣了,其實是因為...

塊級元素和行內元素的區別

塊級元素 行內元素 常見元素 div p form ul ol li span strong em 特性 獨佔一行,預設情況下,其寬度自動填...

塊級元素和行內元素的區別

div和span有什麼區別? 1 div會獨佔一行,而span不會獨佔一行 2 div是一個容器級的標籤,而span是一個文字級的標籤 容器級的標籤和文字級標籤的區別? 1 容器級的標籤中可以巢狀其他所有的標籤 2 文字級的標籤中只能巢狀文字 超連結 css顯示模式 在html中標籤分為兩類,分別是...