一、什么是偽類、偽元素呢？
偽類：偽類對元素的分類是基於特征，而不是基於元素的名字屬性或是內容。特征並不可以通過DOM樹直接獲得。
（偽類選擇器就是不存在與HTML文檔中，但是用CSS語法可以選擇它們，並對其能夠渲染修飾）
偽元素：偽元素創造文檔語言能夠指定的文檔樹之外的抽象。例如：first-chlid訪問第一個子元素。
（CSS偽元素用於向某些選擇器設置特殊效果）
值得注意的是：
有的時候會發現 偽類元素 都使用了兩個冒號（: :）而不是一個冒號（:），這是CSS3規范中的一部分要求，目的是為了區分偽類和偽元素。
大多數瀏覽器都支持這兩種寫法：
#id:after{ content:" ";
}
或是
#id::after{ content:" ";
}
就比標准而言，單引號（:）用於CSS3偽類，雙引號（::）用於CSS3偽元素。
當然，也有例外，例如：before和 ::before 無論是單引號還是雙引號before的用法都是一樣的。
注意：如果網站只需要兼容Webkit 、Firefox、Opera等瀏覽器或是移動端頁面，建議偽元素選擇器使用兩個冒號（::）的寫法；
如果一定要兼容低版本的IE瀏覽器時，還是使用CSS2的單個冒號（:）的寫法更加保險一些網站
二、常見偽類和偽元素種類
常見偽類的種類：
1、動態偽類選擇器
不存在與HTML中，只有在動態交互時才使用
：active 選擇所有有效值的屬性
：link 選擇所有未訪問鏈接
：hover 把鼠標放在鏈接上的狀態
：visited 選擇正在活動鏈接
：lang 指定 lang 屬性開始的元素添加樣式
：focus 選擇元素輸入后具有焦點
2、UI元素狀態偽類選擇器
元素分為不同的狀態，常用於表單之中
：disable 指定當頁面打開時默認處於選取狀態的單選框或復選框的控件的樣式
：cehcked 指定當表單中的radio單選框或者是checkbox復選框處於選取狀態時的樣式
還有更多選擇器，感興趣可以自己去查詢一下~
3、結構偽類選擇器：
很大程度上簡化了HTML的的文本結構，讓HTML更語義化更結構化。減少了文檔中class和id的使用。
：first-child 選擇第一個子元素
：last-child 選擇元素最后一個子元素
：nth-child() 選擇某元素一個或是多個特定的子元素
：nth-last-child() 選擇某個元素一個或是多個特定的子元素，從這個子元素的最后一個子元素開始計算
：nth-of-type() 選擇指定的元素
：nth-last-of-type() 選擇指定元素，從元素最后一個值開始計算
：first-of-type 選擇一個上級元素下的第一個同類子元素
：last-of-type 選擇一個上級元素下的最后一個同類子元素
：only-child 選擇父元素的唯一一個子元素
：only-of-type 選擇一個元素是它上級元素的唯一一個相同類型的子元素
：empty 選擇的元素里面沒有任何內容
常見偽元素的種類：
::first-letter 將特殊的樣式添加到文本的首字母
::first-line 將特殊的樣式添加到文本的首行
::before 在某元素之前插入某些內容
::after 在某元素之后插入內容
::selection 匹配元素中被用戶選中或處於高亮狀態的部分
::backdrop 給下層文檔設置樣式或隱藏它
三、偽類和偽元素的區別：
偽類作用的對象是整個對象
偽類沒有創造元素，例如：first-child只是給子元素添加樣式。
偽元素作用於元素的一部分，一個段落的第一行或第一個字母
偽元素相當於創造了一個元素，例如：before和：after都相當於創造了一個新的元素，然后添加了響應的效果。
四、使用JS獲取偽類
獲取偽元素的屬性值可以使用window.getComputerStyle()方法。獲取偽元素的CSS樣式聲明對象。
然后利用getPropertyValue() 方法或鍵值訪問都可以獲取對應的屬性值；
語法：window.getComputedStyle( element [, pseudoElement] )
element（Object）：偽元素所在的DOM元素
pseudoElement（String）：偽元素類型。可選擇的偽元素有：”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”；