偽類

CSS2中對偽類的定義是：CSS 偽類用于向某些選擇器添加特殊的效果。

截止css2，偽類有以下幾種：

CSS3中對偽類的定義如下：

• 偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的信息（如：:link、:visited）以及不能被常規CSS選擇器獲取到的信息（:target用來匹配文檔(頁面)的URI中某個標志符的目標元素）。
• 偽類由一個冒號:開頭，冒號后面是偽類的名稱和包含在圓括號中的可選參數。
• 任何常規選擇器可以再任何位置使用偽類。偽類語法不區別大小寫。一些偽類的作用會互斥，另外一些偽類可以同時被同一個元素使用。并且，為了滿足用戶在操作DOM時產生的DOM結構改變，偽類也可以是動態的。

CSS3新增的偽類如下：

新增偽類	作用	?
E:first-child	匹配作為父元素的第一個子元素E，與E:nth-child(1)等同	?結構偽類選擇器
E:last-child	匹配作為父元素的最后一個子元素E，與E:nth-last-child(1)等同
E:root	?選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html
p:nth-child(n)	選擇屬于其父元素的第n個子元素的每個<p>元素。
p:nth-last-child(n)	選擇屬于其父元素的倒數第n個子元素的每個<p>元素。
p:nth-of-type(n)	選擇屬于其父元素第n個<p>元素的每個<p>元素。
p:nth-last-of-type(n)?	選擇屬于其父元素倒數第n個<p>元素的每個<p>元素。
p:first-of-type	選擇屬于其父元素的首個<p>元素的每個<p>元素。
p:last-of-type	選擇屬于其父元素的最后<p>元素的每個<p>元素。
p:only-of-type	選擇屬于其父元素唯一的<p>元素的每個<p>元素。
p:only-child	選擇屬于其父元素唯一的子元素的每個<p>元素。
p:empty	選擇沒有子元素的每個<p>元素（包括文本節點）。
p:target?	選擇當前活動的<p>元素。	?目標偽類選擇器
:not(p)	選擇非<p>元素的每個元素。	?否定偽類選擇器
:enabled	可用狀態的控制表單控件。	?UI元素狀態偽類選擇器
:disabled?	禁用狀態的控制表單控件。
:checked?	單選框或復選框被選中的元素。

偽元素

CSS2中，對于偽類和偽元素的定義是完全一樣的。

截止CSS2，偽元素有以下幾種：

CSS3對偽元素的定義如下：

• 偽元素在DOM樹中創建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）。比如：documen接口不提供訪問元素內容的第一個字或者第一行的機制，而偽元素可以使開發者可以提取到這些信息。并且，一些偽元素可以使開發者獲取到不存在于源文檔中的內容（比如常見的::before,::after）。

• 偽元素的由兩個冒號::開頭，然后是偽元素的名稱。使用兩個冒號::是為了區別偽類和偽元素（CSS2中并沒有區別）。當然，考慮到兼容性，CSS2中已存的偽元素仍然可以使用一個冒號:的語法，但是CSS3中新增的偽元素必須使用兩個冒號::。

• 一個選擇器只能使用一個偽元素，并且偽元素必須處于選擇器語句的最后。

簡單來說，偽元素創建了一個虛擬容器，這個容器不包含任何DOM元素，但是可以包含內容。另外，開發者還可以為偽元素定制樣式。

CSS3中的偽元素為：

偽元素	作用
::first-letter	將樣式添加到文本的首字母
::first-line	將樣式添加到文本的首行
::before	在某元素之前插入某些內容
::after	在某元素之后插入某些內容
::selection	?用來匹配突出顯示的文本

偽類和偽元素的特性與區別

偽類本質上是為了彌補常規CSS選擇器的不足，以便獲取到更多信息；

偽元素本質上是創建了一個有內容的虛擬容器；

CSS3中偽類和偽元素的語法不同；

可以同時使用多個偽類，而只能同時使用一個偽元素；

錨偽類

在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。

a:link	?未訪問的鏈接
a:visited	?已訪問的鏈接
a:hover	?鼠標移動到鏈接上
a:active	?選定的鏈接

?

轉載于:https://www.cnblogs.com/lmjZone/p/8716291.html

總結

以上是生活随笔為你收集整理的伪类、伪元素、锚伪类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。