css样式加载顺序及覆盖顺序深入理解

1. 加载顺序
2. 当浏览器解析 HTML 文件时，会按照先后顺序逐个加载每一个元素，并将其与样式层叠在一起呈现出最终的页面。

3. 在加载样式时，浏览器会遵循以下顺序：

   1. 加载浏览器自带的样式表，如 user agent stylesheet。
   2. 加载外部样式表，如 link 标签所引用的样式表。
   3. 加载 style 标签中属于内部样式表的样式。
   4. 加载元素内的 style 属性。

4. 样式覆盖顺序

5. 当两个或多个样式冲突时，会出现样式覆盖的情况。此时，浏览器会按照以下顺序来决定样式的优先级（从高到低）：

   1. !important 声明。
   2. 元素内联样式 style 属性。
   3. ID 选择器。
   4. 类选择器和属性选择器。
   5. 标签名和伪类选择器。
   6. 继承得到的样式。

6. 下面是两个示例说明：

   ```html

   Hello World!

   ``
在上面的例子中，由于类选择器的优先级低于标签名选择器，所以最终Hello World!` 会显示为红色。

   ```html

   Hello World!

   ``
在上面的例子中，由于style属性中的内联样式声明优先级高于类选择器和标签名选择器，而!important声明又优先级最高，所以最终Hello World!` 会显示为红色。