CSS3中增加的偽類有哪些及其作用是什麼？

本篇文章帶給大家的內容是關於CSS3中增加的偽類有哪些及其作用是什麼？有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1. 偽類別與偽元素

CSS偽類別：用於為某些選擇器新增特殊的效果。

CSS偽元素：用於將特殊的效果新增至某些選擇器。偽元素代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻不實際存在於文檔樹中。

##:: before在某元素之前插入某些內容::after在某元素之後插入某些內容

偽元素	作用
#::first-letter	將樣式加入到文字的首字母
::first-line	將樣式加入到文字的首行

# 偽類的效果可以透過添加一個實際的類別來達到，而偽元素的效果則需要透過添加一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為偽元素的原因。

CSS3為了區分偽類和偽元素，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。

單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。偽元素由雙冒號和偽元素名稱組成。不過瀏覽器需要同時支援舊的已經存在的偽元素寫法，例如:first-line、:first-letter、:before、:after等，而新的CSS3中引入的偽元素則不允許再支援舊的單冒號的寫法。

2、CSS3新增偽類別

新增偽類別作用# #p:first-of-type選擇屬於其父元素的首個

元素的每個

元素。

p:last-of-type選擇屬於其父元素的最後

元素的每個

元素。

p:only-of-type選擇屬於其父元素唯一的

元素的每個

元素。

p:only-child選擇屬於其父元素唯一的子元素的每個

元素。

p:nth-child(n)選擇屬於其父元素的第n個子元素的每個

元素。

p:nth-last-child(n)選擇屬於其父元素的倒數第n個子元素的每個

元素。

p:nth-of-type(n)選擇屬於其父元素第n個

元素的每個

元素。

p:nth-last-of-type(n) #選擇屬於其父元素倒數第n個

元素的每個

p:last-child選擇屬於其父元素最後一個子元素的每個

元素。

p:empty選擇每個沒有子元素的

元素（包含文字節點）。

p:target #選擇目前活動的

元素。

:not(p)選擇非

元素的每個元素。

:enabled控製表單控制項的可用狀態。 :disabled 控製表單控制項的停用狀態。 :checked 單選方塊或複選框被選取。 #偽類別#作用:hover將樣式加入滑鼠懸浮的元素:active將樣式加入已啟動的元素:focus將樣式新增至獲得焦點的元素:link將樣式新增至未被造訪的連結:visited將樣式加入被造訪的連結:first-child將樣式新增到元素的第一個子元素:lang定義指定的元素中所使用的語言

相關推薦：

css選擇器有哪些類型？ css常用選擇器的簡單介紹

什麼是css？ css三種樣式以及文字屬性的介紹

####

以上是CSS3中增加的偽類有哪些及其作用是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！