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：表示當所指元素處于激活狀態(tài)（鼠標在元素上按下還沒有松開）時所顯示的顏色。
偽類的順序應為link--visited--hover--focus--active括饶。
在支持 CSS 的瀏覽器中株茶，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動狀態(tài)图焰，已被訪問狀態(tài)启盛，未被訪問狀態(tài)，和鼠標懸停狀態(tài)技羔。
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 之后，才是有效的拙绊。
- 偽類名稱對大小寫不敏感向图。
把鼠標移到按鈕并點擊時，會產(chǎn)生一串什么樣的事件标沪？
active hove focus
foucs hove active
hover active foucus
hover focus active ****
