1-2-5【CSS核心样式】初识伪类选择器
2020-10-28 本文已影响0人
Liyager
本节课为大家以a标签为例，初步认识伪类选择器~
文章内容输出来源：拉勾教育大前端就业集训营
1.伪类
- 概述：伪类和类之间有一定的相似之处，也存在明显的区别。
- 普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
- 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
- 选择器权重：与普通的类选择器权重相同。
- 写法：普通选择器:伪类名
<style>
div:after{
content: "1";
display: block;
}
</style>
说明：after伪类的意思是，在某标签内部的最后一位，插入一个行内元素，了解即可，后面的课程会细讲~
2.a标签的伪类
- 概述：<a> 标签可以根据用户行为不同，划分为四种状态。通过<a> 标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。
- link：访问前的状态；
说明：
- a:link是伪类选择器,.a1的意思是满足class="a1"的标签，整体相当于一个交集选择器。
- 可以从图中看到，默认未点击颜色为蓝色，因为link伪类，所以未点击状态颜色变为了粉色。
- visited：访问后的状态；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:visited.a1{
color: pink;
}
</style>
</head>
<body>
<a href="https://www.lagou.com" class="a1">拉勾招聘，高薪就业</a>
<br>
<a href="https://www.baidu.com">百度一下，你就知道</a>
</body>
</html>
说明：点击第一个超链接后，超链接颜色变为粉色；点击第二个超链接后，超链接颜色变为紫色（默认值）。
拓展：如果超链接没有点击就已经变色了，说明浏览器记住了你的访问记录，只需要在浏览器工具中“清除浏览数据”即可。
- hover：鼠标悬停在上面的状态；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:hover.a1{
color: pink;
}
</style>
</head>
<body>
<a href="https://www.lagou.com/" class="a1" target="_blank">拉勾招聘，高薪职位</a>
<br>
<a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>
</body>
</html>
说明：第一个超链接设置了hover伪类，鼠标悬停时颜色变为粉色；第二个超链接没有设置，鼠标悬停时没有任何变化。
- visited：鼠标点击时的状态；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:active.a1{
color: pink;
}
</style>
</head>
<body>
<a href="https://www.lagou.com/" class="a1" target="_blank">拉勾招聘，高薪职位</a>
<br>
<a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>
</body>
</html>
说明：第1个超链接，点击鼠标（不要松开），你会发现颜色变成了粉色；第2个超链接，同样点击鼠标，你会发现颜色变成了橙红色（默认值）。
3.a标签伪类书写顺序
- <a> 标签上可能会同时触发2到3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
- 伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:hover{
color: greenyellow;
}
a:link{
color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com" target="_blank">京东购物</a>
</body>
</html>
说明：鼠标悬停在超链接上时，同时触发了“悬停”和“未访问”两种状态，由于link写在hover后面，所以超链接颜色不会发生任何变化，这不是我们希望看到的。
- 要想让每个伪类的状态正常加载，书写顺序必须是:访问前link、访问后visited、鼠标移上hover、鼠标点击active。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link {
color: red;
}
a:visited {
color: red;
}
a:hover {
color: greenyellow;
}
a:active {
color: hotpink;
}
</style>
</head>
<body>
<a href="https://www.jd.com" target="_blank">京东购物</a>
</body>
</html>
4.a标签的伪类实际应用
- 一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link,a:visited{
background-color: #272626;
}
a:hover{
background-color: rgba(255, 102, 0, 0.993);
}
a{
display: block;
width: 150px;
height: 70px;
text-decoration: none;
color: white;
font-size: 30px;
text-align: center;
}
p{
line-height: 70px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">
<p>
首页
</p>
</a>
</body>
</html>
说明：模拟了一个“首页”导航栏按钮的效果实现。
- 更加常用的一种设置方式如下:
- <a> 标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的<a>默认显示样式的属性，包括盒模型、文字等。
- a:hover 伪类选择器:设置鼠标移上时不一样的样式属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
display: block;
width: 150px;
height: 50px;
background-color: skyblue;
font: bold 30px/50px "微软雅黑";
text-align: center;
color: white;
text-decoration: none;
}
a:hover{
background-color: yellowgreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
5.总结
- 本章节只是以a标签为例，来说明伪类选择器，不代表只有a标签才能使用伪类选择器！
- 其他标签也可以设置hover伪类状态，后面的课程中会经常用到。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，诸君共勉！
