1. 前言
我们之前讲过了许多种选择器,比如元素选择器、id选择器、class选择器、分组选择器、嵌套选择器。
这些选择器,都是用来选择某个、或者某些元素的。
但是其实还有一些更高级的选择方式,例如选择处于某种状态的元素。比如超级链接,有未点击过的、有已点击过的、有鼠标悬停的、也有点击那一刻的。
我们可以通过伪类选择器,来选择这些特殊的状态的元素。至于为啥叫伪类,可能跟它们不是正儿八经的类,只是处于某种状态的类有关系。
2. 实例解析
我们以超级链接元素常用的伪类选择器为例进行演示:
<head>
<meta charset="utf-8">
<style>
/* 未点击过的链接 */
a:link {
color: grey;
}
/* 已点击过的链接 */
a:visited {
color: red;
}
/* 鼠标悬停的链接 */
a:hover {
color: blue;
}
/* 点击那一刻的链接 */
a:active {
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点此访问百度</a>
</body>
我们通过伪类选择器,设定了不同状态下超级链接的样式。
所以未点击时,效果如下:
当鼠标悬停时,颜色会变为蓝色;当点击那一刻,颜色会变为绿色。再次返回该网页,因为已经点击过,颜色会变为红色。大家可以自己尝试下。
3. 小结
伪类选择器拓展了CSS选择器的功能,让我们可以把样式应用的更灵活更方便。
实际在项目开发过程中,大家可以接触到更多的伪类选择器。