本节学习：CSS 基础选择器（5种）

---

本节视频

https://www.bilibili.com/video/BV1n64y1U7oj?p=23

---

基础选择器是 CSS 中最常用的选择器类型，它们用于选择 HTML 文档中的元素。以下是基础选择器的列表以及它们的优先级（权重）：

基础选择器

1. 通配符选择器

   • 选择所有元素。
   • 示例：* { ... }​

2. 元素选择器

   • 选择特定类型的 HTML 元素。
   • 示例：p { ... }​, h1 { ... }​, div { ... }​

3. 类选择器

   • 选择具有特定类名的元素。
   • 示例：.classname { ... }​

4. ID 选择器

   • 选择具有特定 ID 的元素。
   • 示例：#idname { ... }​

5. 属性选择器

   • 选择具有特定属性或属性值的元素。
   • 示例：[attr] { ... }​, [attr=value] { ... }​

6. 伪类选择器

   • 选择处于特定状态的元素。
   • 示例：:hover { ... }​, :visited { ... }​, :first-child { ... }​

7. 伪元素选择器

   • 选择元素的特定部分。
   • 示例：::before { ... }​, ::after { ... }​, ::first-letter { ... }​

---

选择器的优先级（权重）

选择器的优先级由以下规则决定：

1. 行内样式（Inline Style）

   • 权重最高。
   • 示例：<p style="color: red;">​

2. ID 选择器

   • 权重为 0100​。
   • 示例：#example { ... }​

3. 类选择器、属性选择器、伪类

   • 权重为 0010​。
   • 示例：.classname { ... }​, [attr] { ... }​, :hover { ... }​

4. 元素选择器、伪元素

   • 权重为 0001​。
   • 示例：p { ... }​, ::before { ... }​

5. 通配符选择器

   • 权重最低，为 0000​。
   • 示例：* { ... }​

‍

在选择器组合时，权重会相加。例如：

• ​.example​（类选择器）权重为 0010​。
• ​#example​（ID 选择器）权重为 0100​。
• ​p.example​（类选择器和元素选择器组合）权重为 0011​。
• ​div p#example​（元素选择器和 ID 选择器组合）权重为 0111​。

注意：使用 !important​ 规则可以覆盖任何其他优先级，但不建议频繁使用，因为它会使得 CSS 的调试和维护变得更加困难。!important​ 的使用会忽略上述的权重计算规则。