僞類、僞元素的區別和應用場景

每次被別人聞到僞類和僞元素有什麼區別的時候，都是傻傻分不清楚，回答的也不盡人意；因此僞類和僞元素的區別是什麼呢？做用是什麼呢？本文將從區別與做用兩方面來學習僞類和僞元素的知識。

1. 僞類與僞元素的區別
   僞類：w3c的標準定義是：CSS僞類是用來添加一些選擇器的特殊效果。

   顧名思義，是一個類，類是什麼是css選擇器呀，因此css選擇器不會存在於dom元素中，因此想一想咱們經常使用的那些是僞類 （不存在與dom結構中，還能控制樣式的）第一個想到的應該是a標籤的哪幾種狀態僞類了吧，好比

   a:link {color:#FF0000;} /* 未訪問的連接 */
   a:visited {color:#00FF00;} /* 已訪問的連接 */
   a:hover {color:#FF00FF;} /* 鼠標劃過連接 */
   a:active {color:#0000FF;} /* 已選中的連接 */

   還有一些好比咱們經常使用的:first-child,:last-child :lang :checked :empty,如下爲所有
   
   咱們先來總結一些僞類：
   一、僞類是類，因此跟css選擇器有關，不存在與dom中
   二、CSS僞類是用來添加一些選擇器的特殊效果的
   三、僞類前面以後一個冒號:first-child

2. 僞元素： 僞元素是創造文檔樹以外的對象。僞元素也是元素，只不過不存在與dom對象中，可是瀏覽器審查元素的時候能看獲得的，好比::before ::after
   
   咱們總結一下僞元素：

   1. 僞元素是兩個冒號
   2. 僞元素能夠被審查元素看到

   以上總結區分一下二者的區別
   相同點：

   • 僞類和僞元素都不出如今源文件和文檔樹中。也就是說在html源文件中是看不到僞類和僞元素的。

   不一樣點：
   僞類本質上是爲了彌補常規CSS選擇器的不足，以便獲取到更多信息；
   僞元素本質上是建立了一個有內容的虛擬容器；
   CSS3中僞類和僞元素的語法不一樣；
   能夠同時使用多個僞類，而只能同時使用一個僞元素；
   一句話是僞元素產生新對象，在DOM樹中看不到（審查元素的時候能夠看到），可是能夠操做；僞類不產生新的對象，僅是DOM中一個元素的不一樣狀態；