css偽類和偽元素

偽，假的意思。把偽字拿掉，可以看出它們的本質區別，一個是類（class），一個是元素（tag），本質區別是有沒有建立新的元素，改變html結構（抽象層面上）。

常見的偽類有：:link , :visited , :hover , :actived , :focus(向擁有鍵盤輸入焦點的元素新增樣式) :first-child(向元素的第一個子元素新增樣式) ， :lang(向帶有lang屬性特定值的元素新增樣式)

常見的偽元素有：::before , ::after , ::first-letter（向文字的第一個字母新增樣式） , ::first-line(向文字的首行新增樣式)

注：::first-letter和::first-line只能作用於塊級元素。

css3中偽類的定義： 

偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的資訊以及不能被常規CSS選擇器獲取到的資訊。

偽類由一個冒號:開頭，冒號後面是偽類的名稱和包含在圓括號中的可選引數。

任何常規選擇器可以再任何位置使用偽類。偽類語法不區別大小寫。一些偽類的作用會互斥，另外一些偽類可以同時被同一個元素使用。並且，為了滿足使用者在操作DOM時產生的DOM結構改變，偽類也可以是動態的。

偽元素定義：

偽元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文件語言裡的（可以理解為html原始碼）。比如：documen介面不提供訪問元素內容的第一個字或者第一行的機制，而偽元素可以使開發者可以提取到這些資訊。並且，一些偽元素可以使開發者獲取到不存在於源文件中的內容（比如常見的::before,::after）。

偽元素的由兩個冒號::開頭，然後是偽元素的名稱。

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

一個選擇器只能使用一個偽元素，並且偽元素必須處於選擇器語句的最後。

（為保證相容，偽元素在書寫的時候還是採用一個冒號開頭）