CSS 选择器的优先级

一、基本概念

CSS 选择器的优先级决定了在样式冲突时，哪个样式规则将被应用到 HTML 元素上。通过理解 CSS 选择器的优先级，可以更好地控制网页元素的样式，避免样式冲突。

二、优先级计算规则

1. 内联样式

内联样式具有最高的优先级。

<p style="color: red;">This is a paragraph.</p>

2. ID 选择器

ID 选择器的优先级仅次于内联样式。

#my-paragraph {color: blue;}

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

这些选择器的优先级相同，低于 ID 选择器。类选择器以`.`开头，属性选择器使用方括号`[]`，伪类选择器以`:`开头。

.my-class {color: green;}[type="text"] {color: purple;}a:hover {color: orange;}

4. 类型选择器和伪元素选择器

类型选择器（标签选择器）和伪元素选择器的优先级最低。类型选择器直接使用 HTML 标签名，伪元素选择器以`::`开头。

p {color: gray;}p::first-letter {font-size: 20px;}

三. !important 规则

使用`!important`关键字来强制应用某个样式规则。`!important`规则会覆盖所有其他优先级规则。

p {color: blue !important;}