偽類選擇器在CSS中扮演的角色可以說是至關重要的，如果CSS沒有偽類選擇器，有很多效果都要藉助js來完成，這樣不僅程式碼量增加，維護起來你難度也大。這樣程式設計師的工作量大，也違反了CSS誕生的作用，就是提高開發效率，在同等的世間完成更高品質的開發。
偽類選擇器包括偽類和偽類物件選擇器，偽類選擇器以冒號( : )作為前綴標識符。 冒號前可以加入選擇符，限定偽類應用的範圍，冒號後為偽類和偽類對象名，冒號前後沒有空格，否則將認為類選擇器，如圖所示。
下面表格包含了大部分偽類選擇器：
動態偽類
動態偽類是一類行為類別樣式，這些樣式不存在於HTML中，只有當使用者於頁面進行互動才能體現出來。動態偽類偽類選擇器包括兩種形式：
錨點偽類，這是連結中最常見的樣式，如:link、:visited。
行為偽類，也成用戶操作偽類，如:hover、:active、:focus。
為了教學簡單，我寫為內嵌式，在實際應用上不建議各位使用內嵌式。
:link
設定超連結在跳轉前的樣式，用法如下：
<ahref=#target=_blank>跳轉</a>
想要設定上面超連結連結前的樣式為字體顏色紅色、無下滑線，可以這樣設定。
:visited
這偽類於:link剛好相反，:link是連結前的樣式，而:visited是連結後的樣式，也就是造訪過後的超連結樣式。
<ahref=#target=_blank>跳轉</a>:li
在日常的學習中可能大家都是把連結前後一起寫的，方便快捷，還符合語意性；這就導致很多同學不知道這兩個偽類有個覆蓋效果的問題。下面的例子可以幫助你們有個大概的了解：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; text-decoration:underline;}</style></head><body><ahref=login.htmltarget=_blank>跳轉</a></body></html>上面這段程式碼就是HTML頁面連結到login頁面的跳轉鏈接，運行後效果圖是這樣的：
:hover
:hover偽類選擇器用於使用者把滑鼠移到元素上面時的樣式效果。不僅用於超連結還可以適用於很多元素上，比如說按鈕，當你把滑鼠移到上面的時候，你會發現按鈕的北背景色變深色了，或者改變顏色了，這就是透過:hover來完成的，當然還有其他方法進行設置，可毫無疑問:hover是最簡單快捷的方法。這裡我先介紹在超連結的使用技巧，在進行擴充使用它來更改滑鼠移動到元素上面後的效果。
如果你想要在滑鼠懸停在a標籤元素上，讓元素改變顏色，程式碼如下：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>跳轉</a></body></html> 
擴充
結構程式碼如下：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;}</style></head><body><div>:hover</div></body></html>當想要的效果是，當滑鼠移到div元素上時，背景色改為黑色、字體改為白色，程式碼如下：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:o range;text-align:center;transition:all1s;}div:hover{background:black;color:white;}</style></head><body><div>:hover</div></body> </html>:active
:active用於使用者點選元素時的樣式效果。多用於表單控件，當使用者點擊時有個按下按鈕的效果。同理這個我放在擴展區域。
當點擊超連結我想要更改超連結字體的顏色，實現程式碼如下：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>跳轉</a></body></html>擴充
這個實例是用div模仿一個按鈕，html自帶的按鈕樣式一言難盡，模仿的好進行樣式控制。
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;background :green;font-size:24p x;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{background:orange;color:white;}</style></head><body><div>按鈕</div></body></html>:focus
:focus 多用元素成為焦點時的樣式效果，這個常用與表單控制項元素上。
結構代碼：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ body></html>
當想input取得焦點後，背景色為#CCC，實作程式碼：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;}</style></head><body><formaction =#method=post><inputtype=text></form></body></html>可以看到input取得焦點後背景色改為目標顏色的樣式效果了。
注意事項：
（1）上述偽類選擇器遵循順序原則，也就是link 到visited 到hover 再到active 偽類。
（2）hover和active又被列入到使用者行為偽類中。
first-child
偽類別first-child 能夠符合指定父元素下的第一個子元素，例如ul li:first-child能夠符合<ul>元素下的第一個<li>元素，範例程式碼如下：
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*符合<ul>下的第一個<li>標籤*/color:red;}</style></head>< body><ul><li>dotcpp程式設計</li><li>dotcpp程式設計</li><li>dotcpp程式設計</li></ul></body></html>運行結果：
ast-child
與first-child 類似，偽類last-child 能夠匹配指定父元素下的最後一個子元素，例如ul li:last-child能夠匹配<ul>元素下的最後一個<li>元素，範例程式碼如下：
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*符合<ul>下的最後一個<li>標籤*/color:red;}</style></head><body ><ul><li>dotcpp程式設計</li><li>dotcpp程式設計</li><li>dotcpp程式設計</li></ul></body></html>運行結果：
nth-child
偽類nth-child 是CSS3 中新增的，它可以匹配指定元素下的第n 個子元素，例如ul li:nth-child(2)能夠匹配<ul>元素下的第二個<li>元素，範例程式碼如下：
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*符合<ul>下的第二個<li>標籤*/color:red;}</style></ head><body><ul><li>dotcpp程式設計</li><li>dotcpp程式設計</li><li>dotcpp程式設計</li></ul></body></html>運行結果：
