CSS第2篇，深入理解 CSS 选择器：全面指南

CSS 选择器是一种用于选择 HTML 元素并对其应用样式的语法规则。CSS 选择器可以基于元素类型、ID、类、属性等进行选择，并提供了多种方式来定位和选择特定的元素。

以下是一些常见的 CSS 选择器以及它们的使用示例：

1. 元素选择器：选择特定类型的 HTML 元素。

p { color: blue; } /* 选择所有段落，并将其文字颜色设置为蓝色 */

2. 类选择器：选择具有特定类的 HTML 元素。

.highlight { background-color: yellow; } /* 创建一个名为 "highlight" 的类，背景色为黄色 */

3. ID 选择器：选择具有特定 ID 的 HTML 元素。

#firstname { color: red; } /* 选择 ID 为 "firstname" 的元素，并将其文字颜色设置为红色 */

4. 属性选择器：选择具有特定属性的 HTML 元素。

input[type="text"] { background-color: lightgrey; } /* 选择所有文本输入框，并设置背景色为浅灰色 */

5. 伪类选择器：选择特定状态的 HTML 元素。

a:hover { color: green; } /* 当鼠标悬停在链接上时，将文字颜色设置为绿色 */

6. 子选择器：选择指定父元素的直接子元素。

ul > li { border-top: 1px solid grey; } /* 为无序列表中的每个列表项添加灰色顶部边框 */

7. 相邻选择器：选择紧跟在另一个元素后的元素。

p + div { margin-top: 20px; } /* 为紧跟在段落后的第一个 div 设置顶部外边距为 20px */

8. 后代选择器：选择特定父元素的后代（不仅限子元素）。

div a { color: purple; } /* 将 div 内的所有链接文字颜色设置为紫色 */

9. 通配选择器：选择所有元素。

* { margin: 0; padding: 0; } /* 移除所有元素的默认外边距和内边距 */

10. 组选择器：选择多个选择器对应的元素。

h1, h2, h3 { font-family: "Times New Roman", Times, serif; } /* 为所有标题元素设置字体为 "Times New Roman" */

这些是 CSS 选择器的基础和常用示例。CSS 选择器还有更高级的用法，如伪类选择器、属性选择器、nth-child 选择器等，可以用来创建更复杂的样式规则。