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时的状态

在这里插入图片描述

相关阅读:
产品经理简要介绍主流电商平台商品API接口的重要应用价值
 【kubernetes】Debian使用Kubeadm部署Kubernetes失败：Connection Refused
成考本科学位英语考试有固定合格分数线吗？
代码分割换行处理元素中空白 white-space属性
 天翼物联发布5G纺织行业定制专网
 TC8：UDP_USER_INTERFACE_01-08
Shell脚本初级使用
 netty入门前置知识-NIO
契约锁电子签助力拍卖业务网上签约，保全证据、不可抵赖，成交快
 【C++】详细讲解函数使用，带你玩转C++函数~
原文地址：https://blog.csdn.net/SSS4362/article/details/125478859