a標籤的那些個偽類
阿新 • • 發佈：2018-12-20
1.a標籤的幾種狀態
a 標籤應該有幾種狀態呢？ 從它的作用我們可以分析出， 我想知道這個超連結點過沒有， 就存在兩種狀態， a:link 表示點選過， a:visited表示已訪問過。 在瀏覽京東、淘寶的時候， 我們還可以發現， 當滑鼠懸浮在某個標籤上， 它會變大， 這種滑鼠懸浮在超連結的狀態為 a:hover
2.a:link的使用
<html> <head> <style type="text/css"> a:link{color:red;} </style> </head> <body> <a href="#">111111</a> <a href="#">22222</a> </body> </html>
執行結果：
3.a:visited 的使用
<html>
<head>
<style type="text/css">
a:visited{color:red;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
執行結果：
（訪問過之後）
4.a:hover的使用
<html> <head> <style type="text/css"> a:hover{ border-bottom:red solid 3px; padding-bottom: 10px; } </style> </head> <body> <h1 style="color:black;cursor:pointer;" onclick="location='http://www.baidu.com';" onmouseover="this.style.color='blue';" onmouseout="this.style.color='black';"> 太陽系地球</h1> <a href=" ">太陽系地球</a> </body> </html>
執行結果：
（懸浮在第一個標題字）
（懸浮在第二個標題字）
5.a:active的使用
<html>
<head>
<style type="text/css">
a:active{color:yellow; font-size:33px;}
</style>
</head>
<body>
<a href="#">百度一下</a>
</body>
</html>
執行結果：
（滑鼠點選上去不鬆開左鍵之後的效果）
6.注意：要注意hover放在link和visited之後，不然會沒有效果。