CSS3偽類的功能有兩種：

1.獲取不存在與DOM樹中的信息。比如<a>標(biāo)簽的:link、:visited等，這些信息不存在與DOM樹結(jié)構(gòu)中，只能通過CSS選擇器來獲取；
2.獲取不能被常規(guī)CSS選擇器獲取的信息。比如偽類:target，它的作用是匹配文檔(頁面)的URI中某個(gè)標(biāo)志符的目標(biāo)元素，例如我們可以通過如下代碼來實(shí)現(xiàn)頁面內(nèi)的區(qū)域跳轉(zhuǎn)：

<ul class="tabs">
    <li><a href="#tab1">標(biāo)簽一</a></li>
    <li><a href="#tab2">標(biāo)簽二</a></li>
    <li><a href="#tab3">標(biāo)簽三</a></li>
</ul>
<div id="tab1" class="tab_content">
<!--tabed content--></div>
<div id="tab2" class="tab_content">
<!--tabed content--></div>
<div id="tab3" class="tab_content">
<!--tabed content--></div>

CSS代碼

.tab_content {
  height: 200px;
  background: red;
  margin-bottom: 100px;
}
#tab1:target, #tab2:target, #tab3:target {
    background:blue;
}

二:偽元素

同樣，第一段話是偽元素的清晰定義，也是偽元素與偽類最大的區(qū)別。簡單來說，偽元素創(chuàng)建了一個(gè)虛擬容器，這個(gè)容器不包含任何DOM元素，但是可以包含內(nèi)容。另外，開發(fā)者還可以為偽元素定制樣式。

舉個(gè)綜合使用偽類和偽元素的栗子：

q:lang(de)::after{
    content: " (German) ";
}
q:lang(en)::after{
    content: " (English) ";
}
q:lang(fr)::after{
    content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

以上代碼通過偽類"lang獲取不同lang屬性的節(jié)點(diǎn)，并為之設(shè)置偽元素::after，偽元素的內(nèi)容是此節(jié)點(diǎn)的語言類型。

最后，總結(jié)一下偽類與偽元素的特性及其區(qū)別：

1 偽類本質(zhì)上是為了彌補(bǔ)常規(guī)CSS選擇器的不足，以便獲取到更多信息；
2 偽元素本質(zhì)上是創(chuàng)建了一個(gè)有內(nèi)容的虛擬容器；
3 CSS3中偽類和偽元素的語法不同；
4 可以同時(shí)使用多個(gè)偽類，而只能同時(shí)使用一個(gè)偽元素；