这篇文章主要介绍“CSS超链接伪类的作用有哪些”，在日常操作中，相信很多人在css超链接伪类的作用有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css超链接伪类的作用有
这篇文章主要介绍“CSS超链接伪类的作用有哪些”，在日常操作中，相信很多人在css超链接伪类的作用有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css超链接伪类的作用有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
4种css超链接伪类的作用：1、“:link”，定义正常链接的样式；2、“:visited”，定义已访问过链接的样式；3、“:hover”，定义鼠标悬浮在链接上时的样式；4、“active”，定义鼠标点击链接时的样式。
本教程操作环境：windows7系统、css3&&HTML5版、Dell G3电脑。
因为我们要定义链接样式，所以其中必不可少的就是超级链接中的锚标签--a，锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法，它们的写法如下：
a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。
其中：:link和:visited只能适用于设置超链接a，:hover和:active则可适用所有元素
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接的伪类</title>
<link rel="stylesheet" href="../css/a.css">
</head>
<body>
<a href="https://www.12345.com/" target="__blank">没访问过的链接</a>
<br>
<a href="Https://www.csdn.net/" target="__blank">访问过的链接</a>
</body>
</html>
a:link{
font-size: 20px;
color: hotpink;
}
a:visited{
color: green;
}
a:hover{
color: rgb(0, 217, 255);
}
a:active{
color: rgb(255, 0, 0);
}
注意：只要曾经搜索过都算访问过的，除非清除历史浏览缓存数据。
伪元素，页面中一些特殊的并不真实存在的元素，伪元素表示一些特殊的位置。伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
注意：
1、因为设置::before和::after没有任何效果，所以::before和::after必须结合content属性来使用。 2、content内添加的内容鼠标无法选中。
3、html中的q标签表示短引用，有增加双引号效果，原理是运用了::before和::after属性，content中加上了双引号，所以q标签的双引号也无法选中。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<link rel="stylesheet" href="../css/pseudo_element.css">
</head>
<body>
<h4>WHERE THERE IS A WILL, THERE IS A WAY</h4>
<p>The secret of success (The key to success) is not so much money as a strong will. A great man is one who has a strong will and an indomitable spirit. In other Words, if a man does not have a strong will to win (get) the final victory, he will never succeed in his life. He is no more than a failure.It is quite obvious that there is no difficult thing (nothing difficult) in the world. if you make up your mind to do it, you will certainly accomplish your end. That stands to reason.</p>
</body>
</html>
::first-letter{
font-size: 50px;
}
::first-line{
color: green;
}
::selection{
background-color: sandybrown;
}
p::before{
content: "☛";
}
p::after{
content: "☚";
}
到此，关于“css超链接伪类的作用有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: css超链接伪类的作用有哪些
本文链接: https://www.lsjlt.com/news/85687.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0