僞元素選擇器和僞類選擇器

相信大家在學習css選擇器的時候經常會遇到一個問題就是僞類和僞元素傻傻分不清楚

其實最簡單的分辨方式就是看有幾個冒号僞類是一個冒号，而僞元素則用兩個冒号來表示。

常見的僞類選擇器

僞類表示已存在的某個元素處于某種狀态，但是通過dom樹又無法表示這種狀态，就可以通過僞類來為其添加樣式。例如a元素的:hover, :active等。CSS3中建議使用:表示僞元素，如：a:hover

:focus
/* 僞類将應用于擁有鍵盤輸入焦點的元素。 */
a:hover
/* 滑鼠經過觸發。 */
a:link 
/* 未通路的連結 */
a:visited 
/* 已通路的連結 */
a:active
 /* 已選中的連結 */
a:nth-child(n)
 /* 選擇所有a元素的父元素的第n個子元素*/
           

注意僞類選擇器僅僅隻是選出DOM中已經存在的元素，并不會改變代碼的結構

常見的僞元素選擇器

僞元素主要是用來建立一些不存在原有dom結構樹種的元素，例如：用::before和::after在一些存在的元素前後添加文字樣式等，這些被添加的内容會以具體的UI顯示出來，被使用者所看到的，這些内容不會改變文檔的内容，不會出現在DOM中，不可複制，僅僅是在CSS渲染層加入。CSS3中建議使用::表示僞元素，如：div::before。

a::before
/* before" 僞元素可以在元素的内容前面插入新内容 */
a::after
/* after" 僞元素可以在元素的内容後面插入新内容 */
           

::before和::after這兩個僞類下有特有的屬性content，必須有這個屬性。

總之，僞元素的操作對象是新生成的dom元素，而不是原來dom結構裡就存在的；而僞類恰好相反，僞類的操作對象是原來的dom結構裡就存在的元素。

僞元素與僞類的根本差別在于：操作的對象元素是否存在于原來的dom結構裡。