—

### 3. ID 选择器的工作原理与特异性 (How it Works & Specificity)

当浏览器解析 CSS 样式表时，它会查找 HTML 文档中 `id` 属性值与 ID 选择器名称完全匹配的元素，并对该元素应用相应的样式。

**关键特性：**

* **唯一性 (Uniqueness):** `id` 属性的值在整个 HTML 文档中必须是唯一的。这是 HTML 规范的规定。虽然浏览器通常会容忍重复的 `id`，但这种行为是不可预测的，并且会破坏文档的有效性和可访问性。
* **高特异性 (High Specificity):** ID 选择器具有非常高的特异性。在计算特异性时，一个 ID 选择器的权重为 `(0,1,0,0)`。这使得 ID 选择器能够轻易覆盖绝大多数类选择器、元素选择器和伪类选择器定义的样式。

**特异性示例：**

“`html

这是一个带有 ID 和 Class 的段落。

“`

“`css
p { /* 特异性: (0,0,0,1) */
color: green;
}

.highlight { /* 特异性: (0,0,1,0) */
color: orange;
}

#myParagraph { /* 特异性: (0,1,0,0) */
color: blue; /* 这个颜色会最终生效 */
}
“`
在这个例子中，即使 `p` 和 `.highlight` 都尝试设置颜色，最终 `color: blue;` 仍然会生效，因为它来自具有最高特异性的 `#myParagraph` ID 选择器。

—

### 4. ID 选择器的优点 (Advantages)

1. **精确选择：** 能够精确地选择页面上的唯一元素，确保样式只应用于目标元素。
2. **高优先级：** 由于其高特异性，可以用来覆盖其他低特异性选择器的样式（但需谨慎使用）。
3. **JavaScript 交互：** 是 JavaScript 中 `document.getElementById()` 方法的主要选择机制，提供了一个快速且直接的方式来获取特定 DOM 元素。
4. **锚点功能：** HTML 中的内部链接（例如 `跳转到某处`）依赖于元素的 `id` 属性来实现页面内的跳转。

—

### 5. ID 选择器的缺点 (Disadvantages – Why It’s Discouraged for Styling)

尽管 ID 选择器功能强大，但在 CSS 样式中滥用它会导致许多问题：

1. **不可重用性 (Lack of Reusability):** `id` 必须是唯一的。这意味着你不能将同一个 ID 选择器应用于多个元素。这与 CSS 的“不重复自己”（DRY – Don’t Repeat Yourself）原则相悖，导致代码冗余。
2. **高特异性导致维护困难：** ID 选择器的高特异性是一把双刃剑。它使得样式难以被覆盖。如果你需要修改一个 ID 元素的样式，你可能不得不编写另一个特异性更高（或者使用 `!important`）的规则，从而陷入“特异性战争”，使 CSS 变得难以理解和维护。
3. **限制了组件化：** 在构建可复用 UI 组件时，ID 选择器会成为障碍。一个组件实例可能包含一个 ID，那么你不能在同一页面上放置该组件的另一个实例，因为这将导致重复的 ID。
4. **与 JavaScript 混淆：** 当 ID 主要用于样式时，它可能会与用于 JavaScript 交互的 ID 混淆，使得后续维护者难以区分哪些 ID 可以安全修改，哪些不能。

—

### 6. 类选择器 vs. ID 选择器 (Class Selector vs. ID Selector)

| 特性 | 类选择器 (`.classname`) | ID 选择器 (`#idname`) |
| :———– | :————————————– | :—————————————— |
| **用途** | 适用于样式化一组相关元素，可重复使用。 | 适用于唯一标识页面上单个特定元素。 |
| **重用性** | **可重复使用**，一个元素可有多个类。 | **不可重复使用**，每个 ID 在页面上必须是唯一的。 |
| **特异性** | 较低 (0,0,1,0)。 | 较高 (0,1,0,0)。 |
| **HTML** | `