css偽類(Pseudo-classes)
css偽類是用來添加一些選擇器的特殊效果寥殖。
語法
偽類的語法:
selector:pseudo-class {property:value;}
CSS類也可以使用偽類:
selector.class:pseudo-class {property:value;}
常見的五種 css 偽類
:active 向被激活的元素添加樣式嗽交。
:focus 向擁有鍵盤輸入焦點的元素添加樣式。
:hover 當鼠標懸浮在元素上方時减拭,向元素添加樣式。
:link 向未被訪問的鏈接添加樣式嘹朗。
:visited 向已被訪問的鏈接添加樣式侥衬。
注意:?在CSS定義中,a:hover 必須被置于 a:link 和 a:visited 之后血久,才是有效的突照。
注意:?在 CSS 定義中,a:active 必須被置于 a:hover 之后氧吐,才是有效的讹蘑。
css對于樣式會采取“就近原則”,所以寫在后邊的樣式就覆蓋了前邊的樣式筑舅。
注意:偽類的名稱不區(qū)分大小寫座慰。
代碼示例:
<html>
<head>
<meta charset="UTF-8">
<title>css偽類</title>
<style>
Title
Title
Title
a:link{
color:red;
? ? }
a:hover{
color:yellow;
? ? }
a:visited{
color:blue;
? ? }
a:active{
color:green;
? ? }
</style>
</head>
<body>
<a herf=“#”>注意: 在CSS定義中,a:hover 必須被置于 a:link 和 a:visited 之后豁翎,才是有效的角骤。
? ? 注意: 在 CSS 定義中,a:active 必須被置于 a:hover 之后心剥,才是有效的邦尊。</a>
</body>
效果視圖:
? ?1.<a>標簽不添加herf屬性的話。默認顯示字體顏色為黑色优烧,沒有下劃線蝉揍,這是和有herf屬性的區(qū)別。
2.鼠標移到元素上方觸發(fā)偽類hover畦娄,字體顏色顯示為黃色又沾。
3.點擊元素觸發(fā)偽類visited弊仪,字體顏色顯示為藍色。
4.剛加載出來表示未訪問的連接杖刷,字體顯示為紅色励饵。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(完)