学无先后，达者为师

网站首页 编程语言 正文

a元素的几种伪类选择器

作者：SSS4362 更新时间： 2022-07-10 编程语言

a元素的几种伪类选择器

1.默认选中状态link

a.语法

a:link{
    /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

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>

c.展示效果

在这里插入图片描述

2.悬停状态hover

a.语法

a:hover{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

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>

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

在这里插入图片描述

3.正在点击状态active

a.语法

a:active{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

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>

c.展示效果

在这里插入图片描述

4.点击后状态visited

a.语法

a:visited{
   /*样式值的设置*/
    样式1:样式值1;
    样式2:样式值2;
    .....
    样式n:样式值n;
}

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>

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;
}

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>

c.展示效果

link时的状态

在这里插入图片描述

visited时的状态

在这里插入图片描述

hover时的状态

在这里插入图片描述

active时的状态

在这里插入图片描述

原文链接：https://blog.csdn.net/SSS4362/article/details/125478859

相关推荐

栏目分类
最近更新
Copyright © 2025   AB教程网    免责声明
本站部分资源收集于互联网、用户投稿，其版权归原作者所有，内容以共享、参考、学习为主，不存在任何商业目的。如有侵权请与本站联系，情况属实将予以删除!
本站由    提供CDN加速