注：該表引自W3School教程
偽元素的分類及作用：
接下來讓博主通過一些生動的實例（之前的作業或小作品）來說明幾種常用偽類的用法和效果，其他的讀者可以自己嘗試：
:active
大致效果為用鼠標點擊時，元素增加特效，鼠標松開時，特效消失。多用在按鈕的點擊上。
寫法：
這里id為box的是一div塊，在css中首先設置了他的基本樣式，下面為加入:active偽類后需要修改的樣式。
未點擊時：
點擊之后：
:active、:hover、:focus這幾種常用偽類寫法一致，下面就不再贅述。為了直觀貼上幾張GIF，方便大家理解。
正如之前所說的:active經常用在按鈕的點擊上：
大致寫法就是：在點擊之后讓按鈕的坐標下移1-2像素並縮小外部陰影，由此給人一種立體的感覺。當然，大家可以發揮想象，充分利用偽類來做出最炫的交互。
:hover
當我們需要對某一對象添加當鼠標懸浮之上時改變樣式，就可以用到:hover偽類。
這里還是用按鈕來做演示：
當光標放在按鈕上，按鈕的背景色和文字顏色做一反色並加上漸變，這種效果簡單但吸引人。當然大家也可以隨着不斷學習挑戰更加炫酷的效果。
這里多說一句：
:hover的好搭檔cursor屬性，當屬性值為pointer時，如上上圖，光標覆蓋目標時會變成手型。cursor還有url屬性，其為設置圖片地址。
在之后用javascript或者HTML5做游戲時，系統的光標就顯得格格不入了。這里可以通過cursor將光標變成你想要的手型圖片，比如這樣的：
此時cursor屬性可以放在全局body{}里或者任何你需要的地方。
:focus
當我們需要讓點擊之后的元素一直擁有某些樣式，這時用:active就不行了，因為松開鼠標樣式會消失。:focus可以用在<input>標簽上。
這是之前做過一簡單的表單：
:focus與之前偽類所產生的來不一樣的效果：
:first-child
對元素的第一個子元素添加樣式，常用在ol,ul下面的li，或者tr下面的td或th上等等。
效果：
實際中常用到的地方：
在實際編寫頁面上，經常會有像上圖一樣的布局。多個圖片並排放在一行，對於多個樣式相似並排的元素我們通常將其放在列表標簽里的<li></li>中，這時我們可以先在li的樣式中用margin-right來設置li之間的間距既每張圖間的間距，之后在li的:first-child中通過margin-left來設置第一張與左邊界的距離，從而調整好整排圖片或元素在網頁中的布局。
偽元素:before和:after
二者的作用為在元素之前或之后插入某些內容，注意：這里的“前后”並不是位置上的前后，而是文檔流里的前后。
通常情況下用來做這個：
這個：
以及這個：
都是一些指引型的小三角或者小箭頭之類的。
代碼：
通過給一div附上某一小圖標，然后設置與該div的相關位置。
content中的內容參見unicode幾何圖形列表，由於過大就不在這里貼了，只截取一小部分展示下，有興趣的朋友百度吧。
當然！！before及after的用法絕不這么簡單!
你可以將content屬性設置為“”，然后盡情發揮想象：
這里不僅用了:hover，按鈕外部的光圈就是通過:before做出來的。
感謝您的瀏覽，希望能對您有所幫助。
本文轉載自他人，為尊重原創附上原文鏈接：https://www.cnblogs.com/ghost-xyx/p/3763669.html