4 偽類和偽元素

偽類是用於定義元素的特殊狀態/css偽類是用來新增一些選擇器的特殊效果。

例如，它可以用於：

selector:pseudo-class

/* 未訪問的鏈結 */ a:link /* 已訪問的鏈結 */ a:visited /* 滑鼠懸停鏈結 */ a:hover /* 已選擇的鏈結 */ a:active /*選擇獲得焦點的鏈結*/

a:focus

注意：a:hover必須在 css 定義中的a:link和a:visited之後，才能生效！a:active必須在 css 定義中的a:hover之後才能生效！偽類名稱對大小寫不敏感。

:first-child 偽類與指定的元素匹配：該元素是另乙個元素的第乙個子元素，例如：

/*選擇器匹配作為任何元素的第乙個子元素的任何元素*/ p:first-child /*匹配所有元素中的首個元素*/

p i:first-child

偽元素顧名思義偽裝成元素，但不是元素，這與生成內容相關。生成內容主要指由瀏覽器建立的內容，而不是由標誌或內容來表示。生成內容主要由:before和:after偽元素來實現，當然偽元素還包括:first-line,:first-letter和::selection

css 偽元素主要用於設定元素指定部分的樣式。

例如，它可以用於：

selector::pseudo-element

::first-line 偽元素用於向文字的首行新增特殊樣式:

/*所有元素中的首行新增樣式*/

p::first-line

注意：::first-line偽元素只能應用於塊級元素。

以下屬性適用於 ::first-line 偽元素：

::first-letter 偽元素用於向文字的首字母新增特殊樣式:

/*設定所有元素中文字的首字母格式*/

p::first-letter

::first-letter 偽元素只適用於塊級元素。

下面的屬性適用於 ::first-letter 偽元素：

::selection 偽元素匹配使用者選擇的元素部分:

/*使所選文字在黃色背景上顯示為紅色*/

::selection

以下 css 屬性可以應用於 ::selection：

::before 偽元素可用於在元素內容之前插入一些內容:

/*在每個

偽類和偽元素的根本區別在於：它們是否創造了新的元素。

偽元素：不存在於dom文件中，是虛擬的元素，是建立新元素。代表某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文件樹中；

偽類：存在於dom文件中，邏輯上存在但在文件樹中卻是無須標識的；

偽類只能使用「：」

偽元素既可以使用「:」，也可以使用「::」因為偽類是類似於新增類，所以可以是多個，而偽元素在乙個選擇器中只能出現一次，並且只能出現在末尾

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

偽元素不會出現在dom中，所以不能通過js來操作，僅僅是在 css 渲染層加入

偽元素的特效通常要使用:hover偽類樣式來啟用

偽類則不需要配合content屬性