在所有浏覽器中，超鏈接的樣式如下：
我們可以看出鏈接在鼠標點擊不同時期的樣式是不一樣的。
注：點擊時，指的是點擊超鏈接的一瞬間，字體是紅色的。這個樣式變化是一瞬間的事情。
超鏈接默認情況下帶有下劃線，看起來挺難看的，而且用戶體驗也不好。在CSS中，一般使用“text-decoration:none”來去除超鏈接下劃線，我們在“下劃線、刪除線和頂劃線”這一節已經詳細講解了text-decoration屬性。
語法：
text-decoration:none;
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>去掉超鏈接默認樣式</title>
<style type="text/css">
.a2{text-decoration:none;}
</style>
</head>
<body>
<a href="http://www.lvyestudy.com" class="a1"> 學習網</a><br/>
<a href="http://www.lvyestudy.com" class="a2"> 學習網</a>
</body>
</html>
在浏覽器預覽效果如下：
分析：
由於第二個a標簽應用了“text-decoration:none”，因此它的下劃線被去掉了。
在CSS中，我們使用超鏈接偽類來定義超鏈接在不同時期的不同樣式。
語法：
a:link{CSS樣式}
a:visited{CSS樣式}
a:hover{CSS樣式}
a:actived{CSS樣式}
說明：
定義這四個偽類，必須按照“link、visited、hover、active”的順序進行，不然浏覽器可能無法正常顯示這4種樣式。請記住，這4種樣式定義順序不能改變！
大家可能覺得比較難把這個樣式順序記憶。沒關系，對於掌握俺有一個挺好的方法。“love hate”，看到了麼，這樣就記住了。我們把超鏈接偽類的順序規則稱為“愛恨原則”。大家以後寫代碼的時候想起“愛恨原則”，自然而然就寫出來了。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超鏈接偽類</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
background-color: #40B20F;
}
a{text-decoration:none;font-size:18px;}
a:link{color:white}
a:visited{color: purple; }
a:hover{color:yellow;text-decoration:underline;}
a:active{color:red;}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.lvyestudy.com"> 學習網</a>
</div>
</body>
</html>
在浏覽器預覽效果如下：
鼠標經過樣式如下：
點擊鏈接時樣式如下：
注：點擊鏈接是一瞬間的事情，大家請留意一下超鏈接的樣式變化。
在此學習了CSS超鏈接偽類，我們可以使用CSS偽類向文本鏈接添加復雜而多樣的樣式。
大家可能開始有疑問了，是不是每一個超鏈接都必須要定義4種狀態的樣式呢？答案是否定的。一般情況下，我們只用到2種狀態：未訪問狀態和鼠標經過狀態。大家仔細觀察一下 學習網的導航就知道了， 導航也只是定義了這2種狀態。
未訪問狀態，我們直接在a標簽定義就行了，沒必要使用“a:link”。
語法：
a{CSS樣式}
a:hover{CSS樣式}
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超鏈接偽類</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
background-color: #40B20F;
}
a{text-decoration:none;color:purple}
a:hover{color:white}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.lvyestudy.com"> 學習網</a>
</div>
</body>
</html>
在浏覽器預覽效果如下：
鼠標經過時樣式如下：
疑問
1、很多人覺得按照正常人思維來說，超鏈接樣式的定義順序應該是“未訪問樣式、鼠標經過樣式、點擊時樣式、訪問後樣式”，但是為什麼定義超鏈接樣式必須要按照“未訪問樣式、訪問後樣式、鼠標經過樣式、點擊時樣式”才能在浏覽器中正常顯示這4種樣式呢？
這個問題是新手經常問到的問題，其實這是W3C官方規定的，也許官方的思維跟我們的不一樣。規則這種東西嘛，一般都是官方定的，就像交通規則一樣，我們只需要遵守就行了，沒必要糾結為什麼綠燈走而紅燈停。
不過我們也有很好的記憶方法，大家不用擔心。那就是“愛恨原則”。愛她，是因為超鏈接偽類讓超鏈接變得更“美麗”；恨她，是因為順序太難記。所以我們對她又愛又恨。