css超链接的伪类和伪元素
【摘要】 超链接的伪类和伪元素利用超链接的伪类可以为超链接设置访问状态，给用户更带来更好的体验。当然还有适用于全局的伪类，例如鼠标移入，点击，以及获取焦点点击进去的状态。利用超链接的伪元素可以使操作页面内容，在指定位置添加内容，或修改指定位置的样式。使文章内容更加丰富，体验感更好。下面让我们一起来学习吧！ 1.超链接的伪类只适用于设置超链接的伪劣link;表示没访问过的链接（正常的链接）a:link...
超链接的伪类和伪元素
利用超链接的伪类可以为超链接设置访问状态，给用户更带来更好的体验。
当然还有适用于全局的伪类，例如鼠标移入，点击，以及获取焦点点击进去的状态。利用超链接的伪元素可以使操作页面内容，在指定位置添加内容，或修改指定位置的样式。使文章内容更加丰富，体验感更好。下面让我们一起来学习吧！
1.超链接的伪类
只适用于设置超链接的伪劣
link;表示没访问过的链接（正常的链接）
a:link
{
color:aqua;
}
visited表示访问过的链接 （注*只能修改链接的颜色）
a:visited
{
color:aquamarine;
}
a:hover
适用所有元素的伪劣
hover：表示鼠标移入的状态
active：表示鼠标点击的状态
focus：获取焦点 点击进去的效果
a:hover{
color:black;
font-size:50px;
}
a:active
{
color:blue;
}
a:focus{
color: blanchedalmond;
}
伪元素
“伪元素”表示页面中一些特殊的并不真实存在的元素，可修改指定位置的样式或在指定位置添加元素。功能十分强大。下面来依次讲解！
first-line：表示对第一行内容进行操作
first-letter：表示对文本首字母进行操作
selection：表示选中元素的背景色
before：元素开始位置
after：元素的结束位置
代码实例如下：
<!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>Document</title>
<style>
p::first-letter
{
font-size:50px;
}
p::first-line
{
color:rgb(215, 250, 236);
}
p::selection
{
background-color:blueviolet;
}
div::before
{
content:"{";
}
div::after
{
content: "}";
}
</style>
</head>
<body>
<p>
mynameisTOM
</p>
<div>
iamformchinese
</div>
</body>
</html>
图1.
图2.
图1.为点击前，图2.为点击后被选中的元素背景颜色
”{}“为添加的内容，M首字母大写。
少年强则国强，趁年轻努力学习，未来为建设祖国供一己之力。
祝我中华生日快乐！！！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）