CSS偽類用於向某些選擇器添加特殊的效果。
:active 向被激活的元素添加樣式。
:focus 向擁有鍵盤輸入焦點的元素添加樣式。
:hover 當鼠標懸浮在元素上方時，向元素添加樣式。
:link 向未被訪問的鏈接添加樣式。
:visited 向已被訪問的鏈接添加樣式。
查看實例效果：http://hovertree.com/texiao/css/11.htm
實例代碼：<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS偽類實例 - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<style>
.focushovertree a:link{
color: blue;
}
.focushovertree a:visited{
color: green;
}
.focushovertree a:hover{
color: red;
}
.focushovertree a:focus{
color:black;
}
.focushovertree a:active{
color: yellow;
}
.focushovertree input:focus{
background: yellow;
}
.focushovertree input:active{
background: red;
}
.hvtholder{width:789px;margin:0px auto;}
</style>
</head>
<body>
<div class="hvtholder">
點擊以下鏈接和文本框查看效果，也可以試試Tab鍵<br /><br />
<div class="focushovertree">
<a href="http://hovertree.com/texiao/css/11.htm#urlhovertree" target="_self">本頁錨點鏈接</a> <a href="http://hovertree.com/texiao/css/11.htm" target="_self">本頁無錨點鏈接</a><br /><br />
<a href="javascript:;">點擊我，永遠未訪問</a><br /><br />
<a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/css/">CSS</a> <a href="http://hovertree.com/menu/html5/">HTML5</a>
<a href="http://tool.hovertree.com/info/ip/">查看IP</a>
<a href="http://hovertree.com/hvtart/bjae/v8e7w4u1.htm">原文</a>
<a href="http://hovertree.com/texiao/keleyi/">keleyi菜單</a>
<a href="http://hovertree.com/map/">導航</a>
<br /><br />
<input type="text" id="txthovertree" value="何問起" /><br /><br />
<input type="text" id="urlhovertree" value="先按下鼠標再放開hovertree.com" />
<br /><br />
鏈接：未訪問 藍色，訪問過 綠色，光標懸停 紅色，鼠標按下未放開 黃色， 鼠標按下後松開 黑色。
<br />文本框：鼠標按下 紅色，松開 黃色。
</div>
</div>
<script>document.getElementById("txthovertr"+"ee").focus()</script>
</body>
</html>
例一：
/*css*/
a:link{
color: blue;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
a:focus{
color:black;
}
a:active{
color: yellow;
}
/*html*/
<p><a href="#">click me</a></p>
例二：
/*css*/
input:focus{
background: yellow;
}
input:active{
background: red;
}
/*html*/
<input type="text" id="txt">
link表示鏈接在正常情況下（即頁面剛加載完成時）顯示的顏色。
visited表示鏈接被點擊後顯示的顏色。
hover表示鼠標懸停時顯示的顏色。
focus表示元素獲得光標焦點時使用的顏色，主要用於文本框輸入文字時使用（鼠標松開時顯示的顏色）。
active表示當所指元素處於激活狀態（鼠標在元素上按下還沒有松開）時所顯示的顏色。
注：偽類的順序應為link--visited--hover--focus--active。
在支持 CSS 的浏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:focus {color: #000000} /*使用Tab鍵把聚焦落在鏈接上*/
a:active {color: #0000FF} /* 選定的鏈接 */
提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。
偽類名稱對大小寫不敏感。