CSS 偽類用於向某些選擇器添加特殊的效果，而CSS引入偽類和偽元素的概念是為了實現基於文檔樹之外的信息的格式化。這里講總結關於css偽類和偽元素的相關使用
偽元素
:before/:before 在某個元素之前插入一些內容；
::after/:after 在某個元素之后插入一些內容；
::first-letter/:first-letter 為某個元素中的文字的首字母或第一個字使用樣式；
::first-line/:first-line 為某個元素的第一行文字使用樣式；
::selection 匹配用戶被用戶選中或者處於高亮狀態的部分；
::placeholder 匹配占位符的文本，只有元素設置了placeholder屬性時，該偽元素才能生效；
::backdrop(處於試驗階段) 用於改變全屏模式下的背景顏色，全屏模式的默認顏色為黑色。該偽元素只支持雙冒號的形式；
偽類
（1）表示狀態：
:link 選擇未訪問的鏈接；
:visited 選擇已訪問的鏈接；
:hover 選擇鼠標指針移入鏈接；
:active 被激活的鏈接，即按下單擊鼠標左鍵但未松開；
:focus 選擇獲取焦點的輸入字段；
（2）結構化偽類：
:not 否定偽類，用於匹配不符合參數選擇器的元素；
:first-child 匹配元素的第一個子元素；
:last-child 匹配元素的最后一個子元素；
first-of-type 匹配屬於其父元素的首個特定類型的子元素的每個元素；
:last-of-type 匹配元素的最后一個子元素；
:nth-child :nth-child根據元素的位置匹配一個或者多個元素，它接受一個an+b形式的參數（an+b最大數為匹配元素的個數）；
:nth-last-child :nth-last-child與:nth-child相似，不同之處在於它是從最后一個子元素開始計數的；
:nth-of-type :nth-of-type與nth-child相似，不同之處在於它是只匹配特定類型的元素；
:nth-last-type :nth-last-of-type與nth-of-type相似，不同之處在於它是從最后一個子元素開始計數的；
:only-child 當元素是其父元素中唯一一個子元素時，:only-child匹配該元素；
:only-of-type 當元素是其父元素中唯一一個特定類型的子元素時，:only-child匹配該元素；
:target 當URL帶有錨名稱，指向文檔內某個具體的元素時，:target匹配該元素；
（3）表單相關偽類：
:checked 匹配被選中的input元素，這個input元素包括radio和checkbox；
:default 匹配默認選中的元素，例如：提交按鈕總是表單的默認按鈕；
:disabled 匹配禁用的表單元素；
:empty 匹配沒有子元素的元素。如果元素中含有文本節點、HTML元素或者一個空格，則:empty不能匹配這個元素；
:enabled 匹配沒有設置disabled屬性的表單元素；
:in-range 匹配在指定區域內元素；
:out-of-range 與:in-range相反，它匹配不在指定區域內的元素；
:indeterminate indeterminate的英文意思是“不確定的”。當某組中的單選框或復選框還沒有選取狀態時，:indeterminate匹配該組中所有的單選框或復選框；
:valid 匹配條件驗證正確的表單元素；
:invalid 與:valid相反，匹配條件驗證錯誤的表單元素；
:optional 匹配是具有optional屬性的表單元素。當表單元素沒有設置為required時，即為optional屬性；
:required 匹配設置了required屬性的表單元素；
:read-write 匹配處於編輯狀態的元素。input，textarea和設置了contenteditable的HTML元素獲取焦點時即處於編輯狀態；
:scope(處於試驗階段) 匹配處於style作用域下的元素。當style沒有設置scope屬性時，style內的樣式會對整個html起作用；
（4）語言相關偽類：
:dir(處於實驗階段) 匹配指定閱讀方向的元素，當HTML元素中設置了dir屬性時該偽類才能生效。現時支持的閱讀方向有兩種：ltr（從左往右）和rtl（從右往左）。目前，只有火狐瀏覽器支持:dir偽類，並在火狐瀏覽器中使用時需要添加前綴( -moz-dir() )；
:lang 匹配設置了特定語言的元素，設置特定語言可以通過為了HTML元素設置lang=””屬性，設置meta元素的charset=””屬性，或者是在http頭部上設置語言屬性；
（5）其他偽類：
:root 匹配文檔的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素則可能是其他元素；
:fullscreen 匹配處於全屏模式下的元素。全屏模式不是通過按F11來打開的全屏模式，而是通過Javascript的Fullscreen API來打開的，不同的瀏覽器有不同的Fullscreen API。目前，:fullscreen需要添加前綴才能使用；
備注：
偽元素雖然強大，但是還是有一些特定的標簽是不支持偽元素 before 和 after 的。諸如 <img> 、<input>、<iframe>，這幾個標簽是不支持類似 img::before 這樣使用。究其原因，要想要標簽支持偽元素，需要這個元素是要可以插入內容的，也就是說這個元素要是一個容器，而 input，img，iframe 等元素都不能包含其他元素，所以不能通過偽元素插入內容