零基础CSS入门教程(23)–伪类选择器

编程知识更新时间:2023-04-06 06:33:53

点此查看 所有教程、项目、源码导航

本文目录

1. 前言
2. 实例解析
3. 小结

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">点此访问百度</a>
</body>