2. CSS 选择器

CSS3 选择器是一组规则，用于选择 HTML 文档中的一个或多个元素，以便为这些元素应用样式。

1. 什么是 CSS3 选择器？

在 CSS3 中，选择器的功能得到了增强，支持更复杂和灵活的选择规则，让开发者可以更加高效地编写样式代码。

2. CSS3 选择器的分类及使用方法

CSS3 选择器可以分为以下几大类：

1. 通用选择器

用于选择所有元素。
语法：*
示例：
```
* {
  margin: 0;
  padding: 0;
}
```
效果：将页面中所有元素的 margin 和 padding 设置为 0。

2. 类型选择器

用于选择指定的 HTML 元素（标签）。
语法：直接使用 HTML 标签名。
示例：
```
p {
  color: blue;
}
```
效果：将所有 <p> 元素的文字颜色设置为蓝色。

3. 类选择器

用于选择指定类名的元素。
语法：使用 . 加上类名。
示例：
```
.highlight {
  background-color: yellow;
}
```
效果：为具有 highlight 类的元素设置背景色为黄色。

HTML 示例：

<p class="highlight">这是一个高亮的段落。</p>

4. ID 选择器

用于选择具有特定 ID 的元素。
语法：使用 # 加上 ID 名称。
示例：
```
#header {
  font-size: 24px;
}
```
效果：将 ID 为 header 的元素字体设置为 24 像素。
HTML 示例：
```
<div id="header">这是标题</div>
```

5. 组合选择器

用于组合多个选择器，选择一个或多个元素。

后代选择器

选择某个元素的所有后代。
语法：A B（空格表示 B 是 A 的后代）。
示例：
```
div p {
  color: green;
}
```
效果：选择所有 <div> 元素内的 <p> 子元素，并将文本设置为绿色。

子代选择器

选择某个元素的直接子元素。
语法：A > B
示例：
```
ul > li {
  list-style-type: none;
}
```
效果：选择所有 <ul> 元素的直接 <li> 子元素，并移除默认的列表样式。

相邻兄弟选择器

选择紧接在某个元素之后的兄弟元素。
语法：A + B
示例：
```
h1 + p {
  font-size: 14px;
}
```
效果：降低紧跟在 <h1> 之后的 <p> 元素的字体大小。

通用兄弟选择器

选择某个元素之后的所有兄弟元素。
语法：A ~ B
示例：
```
h1 ~ p {
  color: gray;
}
```
效果：将所有跟随在 <h1> 元素之后的 <p> 元素文字颜色设置为灰色。

6. 属性选择器

用于匹配具有特定属性的元素。

指定属性

语法：[attribute]
示例：
```
input[type] {
  border: 1px solid red;
}
```
效果：为所有具有 type 属性的 <input> 元素添加红色边框。

属性值匹配

语法：[attribute="value"]
示例：
```
input[type="text"] {
  background-color: lightgray;
}
```
效果：将 type="text" 的输入框背景设置为浅灰色。

属性值前缀匹配

语法：[attribute^="value"]
示例：
```
a[href^="https"] {
  color: green;
}
```
效果：将所有链接地址以 https 开头的 <a> 元素文字颜色设置为绿色。

属性值后缀匹配

语法：[attribute$="value"]
示例：
```
a[href$=".pdf"] {
  font-weight: bold;
}
```
效果：将指向 PDF 文件的超链接文本加粗。

属性值包含匹配

语法：[attribute*="value"]
示例：
```
a[href*="example"] {
  text-decoration: underline;
}
```
效果：为所有包含 example 的链接地址添加下划线。

7. 伪类选择器

用于选择元素的特定状态或结构。

动态伪类

:hover：鼠标悬停时触发。
```
a:hover {
  color: red;
}
```

:focus：元素获取焦点时触发。

input:focus {
  border: 1px solid blue;
}

结构伪类

:nth-child(n)：选择匹配父元素中第 n 个子元素。
```
li:nth-child(2) {
  color: orange;
}
```
:nth-of-type(n)：匹配特定类型的第 n 个子元素。
```
p:nth-of-type(3) {
  font-size: 18px;
}
```

其他伪类

:first-child：选择父元素的第一个子元素。
:last-child：选择父元素的最后一个子元素。
:not(selector)：选择不匹配指定选择器的元素。
```
div:not(.highlight) {
  background-color: lightblue;
}
```

8. 伪元素选择器

用于选择元素内容的特定部分。

常见伪元素

::before：在元素内容之前插入内容。
```
h1::before {
  content: "🔥 ";
}
```
效果：在所有 <h1> 元素前加火焰符号。
::after：在元素内容之后插入内容。
```
h1::after {
  content: " ★";
}
```
效果：在所有 <h1> 元素后加星号。

3. 总结

CSS3 中的选择器为页面样式提供了极大的灵活性，可以轻松选择特定的元素或状态，从而进行精准的样式控制。通过组合选择器、属性选择器、伪类和伪元素，我们可以为复杂的页面结构快速编写高效的 CSS 规则。