CSS：选择器 / 14种类型

CSS 选择器是用于选择页面中特定元素的规则。CSS 提供了多种选择器类型，包括基础的标签选择器、类选择器、ID 选择器等，还有更高级的属性选择器、伪类选择器和伪元素选择器。

以下是一些常用的 CSS 选择器类型及其简单示例：

1. 标签选择器（Element Selector）：选择特定类型的所有元素。

p { color: blue; } /* 所有段落文本变蓝色 */

2. 类选择器（Class Selector）：选择所有具有特定 class 名称的元素。

.my-class { background-color: yellow; } /* 所有 class 包含 "my-class" 的元素背景变黄色 */

3. ID 选择器（ID Selector）：选择具有特定 ID 的单个元素。

#my-id { color: red; } /* ID 为 "my-id" 的元素文本变红色 */

4. 属性选择器（Attribute Selector）：选择包含特定属性或属性值的元素。

input[type="text"] { background-color: lightblue; } /* 所有文本输入框背景变浅蓝色 */

5. 伪类选择器（Pseudo-class Selector）：选择特定状态的元素，如：链接的不同状态。

a:hover { color: red; } /* 鼠标悬停在链接上时文本变红色 */

6. 伪元素选择器（Pseudo-element Selector）：选择元素的一部分内容。

p::first-letter { font-size: 200%; } /* 段落文本的首字母字体大小变为200% */

7. 子选择器（Child Selector）：选择指定父元素的直接子元素。

ul > li { color: green; } /* 无序列表的直接子元素 <li> 文本变绿色 */

8. 相邻选择器（Adjacent Sibling Selector）：选择紧跟在另一个元素后的元素，且两者有相同父元素。

h1 + p { margin-top: 0; } /* 紧跟在 <h1> 后的 <p> 段落的上边距设置为0 */

9. 后代选择器（Descendant Selector）：选择指定父元素的后代（不仅限于子元素）。

div p { color: purple; } /* <div> 元素内的所有 <p> 段落文本变紫色 */

10. 通配选择器（Universal Selector）：选择页面中的所有元素。

* { margin: 0; padding: 0; } /* 所有元素的外边距和内边距设置为0 */

11. 群组选择器（Grouping Selector）：将选择器组合在一起，选择这些组合中的任意一个。

h1, h2, h3 { font-family: "Times New Roman", Times, serif; } /* 所有 <h1>、<h2> 和 <h3> 使用 "Times New Roman" 字体 */

12. 伪元素选择器（::before 和 ::after）：用于向元素的内容前后添加内容或者样式。

p::before { content: ">> "; } /* 所有 <p> 段落文本前添加 ">> " */

13. 伪类选择器（:link、:visited、:hover、:active 和 :focus）：用于选择不同