1. 程式人生 > 其它 >九,偽類樣式

九,偽類樣式

技術標籤:CSS基礎

偽類樣式處理:
定義: 通常情況,超級連結上設定的樣式,稱為偽類
作用: 設定超級連結的四種狀態(1-4,需要按照順序來,否則就沒有效果):
小貼士:
1,偽類是用在超級連結上效果比較多,但超級連結不是偽類
2,偽類是選擇器(冒號前面的是標籤,比如a標籤。冒號後面的值才是偽類,比如link)
屬性:
1,a:link:未訪問的連結
2,a:visited:已訪問的連結
3,a:hover:滑鼠移動到連結上(浮動,懸停)具有懸停效果的元件都可以使用這個屬性,比如label,input等
4,a:active:向被啟用的元素新增樣式(滑鼠指標按下了,但是沒有鬆開的瞬間)

5,:focus:選擇擁有鍵盤焦點的元素(比如文字框,標籤可以放進去,就是有焦點)

<!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; }