由於狀態是動態變化的，所以當一個元素達到特定狀態時，它可能會得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文件之外的抽象，所以叫偽類。
CSS偽類，是一種特殊的類，它針對到CSS選擇器起作用，使選取的標籤或元素產生特定的效果。
CSS偽類別的語法就是： 選擇器: 偽類別名稱{ 屬性: 屬性值}
用的最多的偽類就是超鏈接a的偽類，鏈接是網站的重要組成部分，幾乎在每個網頁上都能看到不少的鏈接，合理的設計鏈接的樣式能夠給網頁的顏值加分。連結有四種不同的狀態，分別是link、visited、active 和hover，可以透過以下偽類選擇器來為連結的四種狀態設定不同的樣式：
:link：定義未存取連結的樣式；
:visited：定義已經造訪過連結的樣式；
:hover：定義當滑鼠經過或停留在連結上時的樣式；
:active：定義點擊連結時的樣式。
舉例：
<html><head></head><body><a>沒有href的a標籤,字體沒有修飾，滑鼠放上去也沒反應</a></br><ahref=#target=_blank>href為#的a標籤，預設藍色，帶底線，滑鼠放上去變成手</a></br><ahref=https://www.dotcpp.com/target=_blank>href為網址的a標籤，效果同上</a></ body></html>
運行結果：
（1）:link
說明：設定a物件在未被存取前的樣式表屬性。
舉例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;mar gin-left:10px;background:#ccc;color:black;}</style></head><body><ahref=''>第一個連結</a><ahref=''>第二個連結</a></body></html>運行結果：
（2）:visited
說明：設定a物件在其連結地址已被存取過時的樣式表屬性。
舉例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ; color:black;}a:visited{background:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>第一個連結</a><ahref =''>第二個連結</a></body></html>運行結果：
（3）:hover
說明：設定物件在其滑鼠懸停時的樣式表屬性。
舉例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{backgro und:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}</style></head><body><ahref=''>第一個連結</a><ahref=''>第二個連結</a></body></html>運行結果：
（4）:active
說明：設定物件在被使用者啟動（在滑鼠點選與釋放之間發生的事件）時的樣式表屬性。
舉例：
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{background:#FFFF99;border:1pxsolidred ;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000;border:1pxsolidblack;color:white;}</style></head> <body><ahref=''>第一個連結</a><ahref=''>第二個連結</a></body></html>運行結果：
定義CSS時候的順序不同，也會直接導致連結顯示的效果不同。原因可能在於瀏覽器解釋CSS時所遵循的「就近原則」。正確的順序：a:link、a:visited、a:hover、a:active。