CSS 鏈接偽類選擇器
定義超鏈接時,為了提高用戶體驗,經常需要為超鏈接指定不同的狀態,使得超鏈接在點擊前、點擊后和鼠標懸停時的樣式不同。在CSS中,可以
定義超鏈接時,為了提高用戶體驗,經常需要為超鏈接指定不同的狀態,使得超鏈接在點擊前、點擊后和鼠標懸停時的樣式不同。在CSS中,可以使用鏈接偽類來實現不同的鏈接狀態。
| 超鏈接標記<a>的偽類 | 含義 |
|---|---|
| a:link { CSS樣式規則; } | 未訪問時超鏈接的狀態 |
| a:visited { CSS樣式規則; } | 訪問后超鏈接的狀態 |
| a:hover { CSS樣式規則; } | 鼠標經過、懸停時超鏈接的狀態 |
| a:active { CSS樣式規則; } | 鼠標點擊不懂時超鏈接的狀態 |
<head>n <style>n a {n text-decoration: none; //去除a標簽的下劃線n }n a:link {n color:blue; //未訪問的超鏈接顏色設置為bluen }n a:visited {n color: red; //已經訪問的超鏈接顏色設置為redn }n a:hover {n color: orange; //鼠標經過或懸停的超鏈接顏色設置為orangen } n a:active {n color:aqua; //鼠標點擊不動時超鏈接的狀態n }n </style>n</head>n<body>n <p>a:link (未訪問的狀態):<a href="https://qq.com" target="_blank">騰訊官網</a> </p>n <p>a:hover (鼠標經過或懸停):<a href="https://jd.com" target="_blank">京東官網</a></p>n <p>a:active (鼠標點擊不動):<a href="https://toutiao.com" target="_blank">頭條官網</a></p>n <p>a:visited (已經訪問的狀態):<a href="https://baidu.com" target="_blank">百度官網</a></p>n</body>nn 如下2圖展示效果,其中hover和active分開展示:

下一篇:天然氣鍋爐低氮燃燒改造









