css 选择器的优先级从高到低：1. 行内样式；2. id 选择器；3. 类选择器；4. 类型选择器；5. 通用选择器；6. 属性选择器；7. 伪类选择器；8. 伪元素选择器；当优先级相同，后面声明的样式覆盖前面样式，行内样式优先于外部样式表样式。

CSS 选择器的优先级

CSS 选择器的优先级决定了当多个选择器匹配同个元素时，哪个选择器生效。优先级较高的选择器会覆盖优先级较低的选择器。

优先级从高到低如下：

1. 行内样式

   立即学习“前端免费学习笔记（深入）”；

   • 直接写在 HTML 元素 style 属性中的样式。

2. ID 选择器

   • 以 # 符号开头的选择器，用于匹配带有特定 ID 的元素。

3. 类选择器

   • 以 . 符号开头的选择器，用于匹配带有特定类的元素。

4. 类型选择器

   • 匹配 HTML 元素类型的选择器，例如 p（段落）或 div（区块）。

5. 通用选择器

   • * 符号，匹配任何元素。

6. 属性选择器

   • [] 符号，用于匹配具有特定属性或属性值（例如 [type="text"]）的元素。

7. 伪类选择器

   • 以 : 符号开头的选择器，用于匹配处于特定状态的元素（例如 :hover）。

8. 伪元素选择器

   • 以 :: 符号开头的选择器，用于匹配元素的特定部分（例如 ::before）。

当有多个相同优先级的选择器匹配同个元素时，遵循以下规则：

• 后面声明的样式会覆盖前面声明的样式。
• 相同元素上的行内样式始终优先于外部样式表中的样式。