CSS 伪类语法
CSS 伪类是一种 “选择器”，用于选择元素的特殊状态。CSS 伪类以单冒号（:）开头，它可以让我们选取元素的特定状态或特定位置，而不需要修改 HTML 结构。
在 CSS 中，伪类的语法结构如下：
语法：
selector:pseudo-class {
……
}说明：
selector 是其他选择器，既可以是元素，也可以是 class 等。pseudo-class 是伪类选择器，用于指定元素的状态。
CSS 提供了一些常用的伪类，可以分为以下几类。
- 链接伪类：专门用于选择超链接的不同状态。
- 结构伪类：专门用于根据元素在 HTML 文档中的位置来选择元素。
- 其他伪类：主要包括鼠标伪类、:not 伪类等。
| 链接伪类 | |
| :link | 定义未访问链接的样式 |
| :visited | 定义已访问链接的样式 |
| :hover | 定义鼠标悬停在链接上的样式 |
| :active | 定义鼠标点击链接时的样式 |
| 结构伪类 | |
| :first-child | 选择元素的第一个子元素 |
| :last-child | 选择元素的最后一个子元素 |
| :nth-child(n) | 选择元素的第 n 个子元素，n 可以是数字、关键字或公式 |
| :nth-last-child(n) | 选择元素的倒数第 n 个子元素，n 可以是数字、关键字或公式 |
| :first-of-type | 选择元素的第一个子元素（指定类型） |
| :last-of-type | 选择元素的最后一个子元素（指定类型） |
| :nth-of-type(n) | 选择元素的第 n 个子元素（指定类型） |
| :nth-last-of-type(n) | 选择元素的倒数第 n 个子元素（指定类型） |
| 其他伪类 | |
| :focus | 选择具有焦点的元素 |
| :hover | 选择鼠标指针悬停在其上的元素 |
| :active | 选择被激活的元素（鼠标在元素上按下） |
| :not(selector) | 选择不匹配指定选择器的元素 |
其中，对于超链接这 4 种伪类，它们的顺序是由严格要求的，否则可能会失效。小伙伴们可以记住这么一句口诀：“LoVe HAte（爱恨原则）”，也就是：
Link -> Visited -> Hover -> Active提示: CSS 伪类与 CSS 伪元素 是两个完全不一样的东西，小伙伴们要严格对比理解一下。
CSS 伪类示例
接下来，我们通过几个简单的例子来讲解 CSS 伪类是如何使用的。
示例 1：CSS 使用链接伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: blue;
}
a:active {
color: orange;
}
</style>
</head>
<body>
<a href="https://www.lvyenet.com">绿叶网 </a>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们分别使用了 :link、:visited、:hover 和 :active 伪类，来定义超链接在不同状态下的样式。
- 未访问的链接为红色（red）。
- 已访问的链接为绿色（green）。
- 鼠标悬停在链接上时，链接变为蓝色（blue）。
- 鼠标点击链接的瞬间，链接变为橘色（orange）。
示例 2：CSS 使用结构伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:first-child {
color: red;
}
p:last-child {
color: blue;
}
p:nth-child(2) {
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>这是第1个段落。</p>
<p>这是第2个段落。</p>
<p>这是第3个段落。</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
p:first-child 表示选取父元素中的第一个子元素（该元素类型为 p）。需要注意的是，该父元素指的是 p 的父元素（即 div）。然后 p:last-child 表示选取父元素中的最后一个子元素，而 p:nth-child(2) 表示选取父元素中的第 2 个子元素。
示例 3：CSS 使用 :not 伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:not(.special) {
color: red;
}
</style>
</head>
<body>
<div class="special">绿叶网</div>
<div>绿叶网</div>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
div:not(.special) 表示选取除了 .special 之外的其他所有 div 元素。
