a元素的几种伪类选择器

1.默认选中状态link

a.语法

a:link{
    /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
1
2
3
4
5
6
7

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         /* 如果不设置的话,默认就是蓝色文字,蓝色下划线 */
         a:link{
            /* 设置默认未选中时超链接里面的文字颜色为red(红色) 
            */
           color: red;
           /* 消除下划线 */
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="#">成功不会辜负日复一日的坚持的!!!</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

c.展示效果

在这里插入图片描述

2.悬停状态hover

a.语法

a:hover{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
1
2
3
4
5
6
7

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         a:hover{
           color: skyblue;
           /* 消除下划线 */
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="#">成功不会辜负日复一日的坚持的!!!</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

c.展示效果(鼠标悬停时的状态)

在这里插入图片描述

3.正在点击状态active

a.语法

a:active{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
1
2
3
4
5
6
7

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         a:active{
           color: pink;
           /* 消除下划线 */
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="#">成功不会辜负日复一日的坚持的!!!</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

c.展示效果

在这里插入图片描述

4.点击后状态visited

a.语法

a:visited{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
1
2
3
4
5
6
7

b.源代码

/*
a:visited存在漏洞,黑客可以通过判断下划线是否被去掉来判断用户访问了哪些网站
这是会造成信息的泄露的,因此浏览器限制了visited里面是不能更改浏览器的下划线的!!!
*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         a:visited{
           color: green;
           /* 消除下划线,无效,因为浏览器有限制*/
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="https://www.baidu.com">成功不会辜负日复一日的坚持的!!!</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

c.展示效果

在这里插入图片描述

5.写在一个css中的书写顺序

a.语法

遵循LVHA的顺序(首字母)

a:link{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
a:visited{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
a:hover{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
a:active{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

b.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a标签的四种伪类选择器</title>
    <style type="text/css">
         *{
          /* 清除浏览器默认样式的影响 */
          padding: 0;
          margin: 0;
         }
         a:link{
           color: black;
           /* 消除下划线 */
           text-decoration: none;
         }
         a:visited{
           color: green;
           /* 消除下划线,无效,因为浏览器有限制*/
           text-decoration: none;
         }
         a:hover{
           color: gray;
           text-decoration: none;
         }
         a:active{
           color: blueviolet;
           text-decoration: none;
         }
    </style>    
</head>
<body>
   <a href="https://www.baidu.com">成功不会辜负日复一日的坚持的!!!</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

c.展示效果

link时的状态

在这里插入图片描述

visited时的状态

在这里插入图片描述

hover时的状态

在这里插入图片描述

active时的状态

在这里插入图片描述

相关阅读:
项目保密协议书(范本)
默认搜索引擎怎么变成百度呀，谁能告诉我
 多壁碳纳米管-室温离子液体1-丁基-3-甲基咪唑六氟磷酸盐（[EMIM]PF6）修饰辣根过氧化物酶（HRP）|新型碳糊酶电极（HRP-MWCNTs-CILE）
为什么很多新型编程语言都抛弃了 C 语言风格的 for 语句？
DTLS 检测数据被第三方篡改的方式
 JavaScript 原型-原型链-手写函数继承
 umi3项目axios 请求参数序列化参数
 基于分布式高可用集群的网购系统优化
 Java市场真的饱和了吗？
微信小程序云开发教程——墨刀原型工具入门（页面交互+交互案例教程）
原文地址：https://blog.csdn.net/SSS4362/article/details/125478859