### CSS伪类集合详解
#### 一、概述
CSS伪类是CSS中一种特殊的选择器类型，它们由CSS规范定义并被支持CSS的浏览器自动识别。通过使用这些伪类，开发者能够针对元素的不同状态或者上下文环境应用特定的样式规则。这种机制极大地增强了CSS的表现力和灵活性。
#### 二、伪类的基本语法
伪类的基本语法形式如下：
```css
selector:pseudo-class { property: value }
```
其中，`selector` 是CSS选择器，用来指定需要应用样式的HTML元素；`pseudo-class` 是伪类名称，表示该元素的状态或上下文环境；`property` 和 `value` 分别代表具体的CSS属性和相应的值。
例如：
```css
a:link { color: blue }
```
这段代码表示所有未被访问过的链接 (`a` 元素) 的颜色为蓝色。
#### 三、常用伪类列表及用法详解
##### 1. `:link`
**语法**：`Selector:link{sRules}`
**说明**：设置 `<a>` 元素在其链接尚未被访问时的样式。
- 默认情况下，链接的颜色由浏览器自行决定。
- 对于没有 `href` 属性的 `<a>` 元素，此伪类无效。
- 可以参考 `body` 对象的 `link` 属性和 `document` 对象的 `linkColor` 属性。
**示例**：
```css
a:link {
font-size: 14pt;
text-decoration: underline;
color: blue;
}
```
##### 2. `:hover`
**语法**：`Selector:hover{sRules}`
**说明**：设置元素在其被鼠标悬停时的样式。
- 在CSS1中，此伪类仅适用于 `<a>` 元素。对于没有 `href` 属性的 `<a>` 元素，此伪类无效。
- 在CSS2中，此伪类可以应用于任何元素。
- 可以结合其他伪类一起使用，如 `:link:hover`。
**示例**：
```css
a:hover {
font-size: 14pt;
text-decoration: underline;
color: blue;
}
a:hover span {
color: red;
}
```
##### 3. `:active`
**语法**：`Selector:active{sRules}`
**说明**：设置元素在其被用户激活（即鼠标点击与释放之间发生的事件）时的样式。
- 在CSS1中，此伪类仅适用于 `<a>` 元素。对于没有 `href` 属性的 `<a>` 元素，此伪类无效。
- 在CSS2中，此伪类可以应用于任何元素。
- `:active` 状态可以与 `:link` 或者 `:visited` 状态同时发生。
**示例**：
```css
a:active {
font-size: 14pt;
text-decoration: underline;
color: blue;
}
```
##### 4. `:visited`
**语法**：`Selector:visited{sRules}`
**说明**：设置 `<a>` 元素在其链接地址已被访问过时的样式。
- IE3 将 `:link` 伪类的样式表属性作用于 `:visited` 伪类。
- 默认情况下，已访问过的链接颜色由浏览器自行决定。
- 定义网页过期时间或用户清除浏览历史记录将影响此伪类的作用。
- 对于没有 `href` 属性的 `<a>` 元素，此伪类无效。
**示例**：
```css
a:visited {
font-size: 14pt;
text-decoration: underline;
color: blue;
}
```
##### 5. `:first-child`
**语法**：`Selector:first-child{sRules}`
**说明**：设置父元素的第一个子元素的样式。
- 适用于任何类型的父元素及其子元素。
- 特别适用于列表、段落等元素中的第一个子元素。
**示例**：
```css
p:first-child {
color: green;
}
table td:first-child {
width: 200px;
}
```
##### 6. `:first`
**语法**：`Selector:first{sRules}`
**说明**：设置页面容器第一页使用的样式。仅用于 `@page` 规则。
- 主要用于打印样式表，控制页面布局和边距等。
**示例**：
```css
@page:first {
margin: 4cm;
}
```
##### 7. `:left` / `:right`
**语法**：`Selector:left{sRules}` / `Selector:right{sRules}`
**说明**：设置页面容器位于装订线左边/右边的所有页面使用的样式。仅用于 `@page` 规则。
- 适用于多页文档的排版，尤其是书籍或杂志的排版设计。
**示例**：
```css
@page:left {
margin: 4cm;
}
```
##### 8. `:lang`
**语法**：`Selector:lang{sRules}`
**说明**：设置对象使用特定语言的内容的样式。
- 通过元素的 `lang` 属性来指定语言。
- 主要用于国际化和本地化设计。
**示例**：
```css
blockquote:lang(fr) {
quotes: '“' '”';
}
```
以上列举的是CSS2标准中的一些常见伪类。这些伪类不仅为网页设计提供了更多的表现力，也极大地提升了用户体验。掌握这些伪类的使用方法，有助于开发者更好地进行样式定制和交互设计。
