CSS教程：伪类选择器（常用） 作者：马育民 • 2021-06-05 17:28 • 阅读：10062 # 说明 同一个标签，根据其 **不同的状态**，**有不同的样式**， ### 应用场景 一般用于 超链接 样式，因为 超链接 的默认样式都比较难看 # 注意顺序 - `a:hover` 必须 `a:link` 和 `a:visited` 之后 - `a:active` 必须在 `a:hover` 之后 推荐顺序：`a:link`、`a:visited`、`a:hover`、`a:active` # 设置链接样式 ``` a{ color:black; text-decoration:none } ``` # 未访问的链接 ``` a:link{ color:gray; text-decoration:none } ``` # 链接访问过 ``` a:visited{ color:red; text-decoration:none } ``` # 鼠标放在超链接上 ``` a:hover{ color:green; } ``` # 鼠标点击超链接时 ``` a:active{ color:blue; } ``` # 案例 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a:link{ color:gray; text-decoration:none;/*不显示超链接下划线*/ } a:visited{ color:red; } a:hover{ color:green; } a:active{ color:blue; } </style> </head> <body> <a href="#2">百度</a> </body> </html> ``` 原文出处：/show_1IX1G0v4gsie.html