### 1. 前言
在CSS中，选择器是指用于选择HTML元素的模式，它可以根据元素的标签名、类名、ID等属性来选择元素，并为其应用样式。本文将介绍CSS中的选择器类型及其示例，帮助您更好地理解和运用CSS。
### 2. 基本选择器
基本选择器是指根据元素的标签名、类名、ID等属性来选择元素的选择器。常见的基本选择器有以下几种：
#### 2.1 标签选择器
标签选择器是指根据元素的标签名来选择元素的选择器，它可以为所有符合条件的元素应用样式。例如，下面的代码将为所有`<p>`元素设置字体大小为16px：
```css
p {
font-size: 16px;
}
```
#### 2.2 类选择器
类选择器是指根据元素的class属性值来选择元素的选择器，它可以为所有class属性值符合条件的元素应用样式。例如，下面的代码将为所有class属性值为`text-red`的元素设置字体颜色为红色：
```css
.text-red {
color: red;
}
```
#### 2.3 ID选择器
ID选择器是指根据元素的id属性值来选择元素的选择器，它只能为一个id属性值符合条件的元素应用样式。例如，下面的代码将为id属性值为`header`的元素设置背景颜色为灰色：
```css
#header {
background-color: gray;
}
```
### 3. 组合选择器
组合选择器是指将多个基本选择器组合起来使用的选择器。常见的组合选择器有以下几种：
#### 3.1 后代选择器
后代选择器是指通过空格连接两个或多个基本选择器，以匹配位于另一个元素内部的元素。例如，下面的代码将为所有位于`<div>`元素内部的`<p>`元素设置字体大小为16px：
```css
div p {
font-size: 16px;
}
```
#### 3.2 子代选择器
子代选择器是指通过`>`连接两个基本选择器，以匹配作为另一个元素子元素的元素。例如，下面的代码将为所有位于`<div>`元素内部直接子元素的`<p>`元素设置字体大小为16px：
```css
div > p {
font-size: 16px;
}
```
#### 3.3 相邻兄弟选择器
相邻兄弟选择器是指通过`+`连接两个基本选择器，以匹配与另一个元素相邻的同级元素。例如，下面的代码将为位于`<div>`元素后面相邻的同级`<p>`元素设置字体大小为16px：
```css
div + p {
font-size: 16px;
}
```
### 4. 属性选择器
属性选择器是指根据元素的属性值来选择元素的选择器。常见的属性选择器有以下几种：
#### 4.1 存在属性选择器
存在属性选择器是指根据元素是否具有某个属性来匹配元素。例如，下面的代码将为所有具有`title`属性的元素设置字体颜色为蓝色：
```css
[title] {
color: blue;
}
```
#### 4.2 等值属性选择器
等值属性选择器是指根据元素是否具有某个属性及其属性值来匹配元素。例如，下面的代码将为所有`<a>`元素中具有`target="_blank"`属性值的链接设置字体颜色为红色：
```css
a[target="_blank"] {
color: red;
}
```
#### 4.3 子串匹配属性选择器
子串匹配属性选择器是指根据元素某个属性值中是否包含某个子串来匹配元素。例如，下面的代码将为所有`<a>`元素中具有以`.pdf`结尾的`href`属性值的链接设置字体颜色为绿色：
```css
a[href$=".pdf"] {
color: green;
}
```
### 5. 伪类和伪元素
伪类和伪元素是一种特殊类型的选择器，它们可以根据元素在特定状态下或特定位置上来匹配元素。常见的伪类和伪元素有以下几种：
#### 5.1 鼠标状态伪类
鼠标状态伪类是指根据用户鼠标操作状态来匹配元素。例如，下面的代码将为鼠标悬停在`<a>`链接上时设置字体颜色为红色：
```css
a:hover {
color: red;
}
```
#### 5.2 表单状态伪类
表单状态伪类是指根据表单控件是否处于某个状态来匹配表单控件。例如，下面的代码将为处于聚焦状态（即获得焦点）的文本框设置背景颜色为黄色：
```css
input:focus {
background-color: yellow;
}
```
#### 5.3 位置伪类和伪元素
位置伪类和伪元素是指根据元素在特定位置上来匹配元素。例如，下面的代码将为位于列表第一个子项前面的内容添加一个自定义图标：
```css
li:first-child::before {
content: "\2713";
}
```
### 6. 总结
CSS中有多种类型的选择器，包括基本选择器、组合选择器、属性选择器、伪类和伪元素等。不同类型的选择器可以用于不同场景下的样式控制，灵活运用各种类型的选择器可以让我们更好地实现页面样式效果。
