CSS偽類用于向某些選擇器添加特殊的效果。
-
:active向被激活的元素添加樣式。 -
:focus向擁有鍵盤輸入焦點的元素添加樣式。 -
:hover當鼠標懸浮在元素上方時，向元素添加樣式。 -
:link向未被訪問的鏈接添加樣式。 -
:visited向已被訪問的鏈接添加樣式。
查看實例——走你
- 栗子1
/*css*/
a:link{
color: blue;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
a:focus{
color:black;
}
a:active{
color: yellow;
}
<p><a href="#">click me</a></p>
- 栗子2
/*css*/
input:focus{
background: yellow;
}
input:active{
background: red;
}
<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 之后，才是有效的。
- 偽類名稱對大小寫不敏感。
把鼠標移到按鈕并點擊時，會產生一串什么樣的事件？
active hove focus
foucs hove active
hover active foucus
hover focus active ****
