九,偽類樣式
阿新 • • 發佈:2020-12-14
技術標籤:CSS基礎
偽類樣式處理:
定義: 通常情況,超級連結上設定的樣式,稱為偽類
作用: 設定超級連結的四種狀態(1-4,需要按照順序來,否則就沒有效果):
小貼士:
1,偽類是用在超級連結上效果比較多,但超級連結不是偽類
2,偽類是選擇器(冒號前面的是標籤,比如a標籤。冒號後面的值才是偽類,比如link)
屬性:
1,a:link:未訪問的連結
2,a:visited:已訪問的連結
3,a:hover:滑鼠移動到連結上(浮動,懸停)具有懸停效果的元件都可以使用這個屬性,比如label,input等
4,a:active:向被啟用的元素新增樣式(滑鼠指標按下了,但是沒有鬆開的瞬間)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="test5.css">
</head>
<body>
<p>http://www.imooc.com</p>
<p class="p1">慕課網</p>
<a href="#">偽類</a>
<input type="text" name="1">
<label>測試</label>
</body>
</html>
a:link {
color: green;
}
a:visited{
color: red;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
}
input:hover{
background-color: yellow;
}
input:active{
background-color: blue;
}
label:active{
color: blue;
}