【前端基础】1.CSS文件的加载和解析顺序

HTML中，使用<link>标签先后加载两个CSS文件，其加载和解析顺序主要遵循以下规则：

          CSS文件的加载与解析在现代浏览器中是边加载边解析的过程，而不是等所有CSS文件加载完毕后再进行解析。

　　　1.　加载顺序：CSS文件按照<link>标签在HTML中的书写顺序加载。例如：

　　　　　浏览器会先加载style1.css，然后加载style2.css。

• • 每个CSS文件在下载过程中可以同时被解析。
  • 第一个文件（style1.css）开始加载时，浏览器立即解析内容。
  • 第二个文件（style2.css）开始加载时，同样边加载边解析。

   2.  阻塞的影响：

CSS加载是一个阻塞过程。HTML解析会在CSS文件加载和解析完成后继续，确保样式正确应用到文档结构中。

因此，浏览器不会等所有CSS文件加载完后再解析，而是尽可能并行加载，但始终按照文档中<link>的顺序应用规则。

　　　3.  异步加载的例外：

　　　 　如果通过额外的属性（如media）指定了条件加载，或者通过JS动态插入<link>标签，那么CSS加载解析的顺序可能会发生变化。例如：

<link rel="stylesheet" href="style1.css">

<link rel="stylesheet" href="style2.css" media="print">     //表示该CSS文件只在打印页面或预览打印时生效，CSS文件的媒体类型是screen(仅在屏幕设备（如电脑显示器、手机、平板）上应用)

　　　　在这种情况下，style2.css只有在满足media="print"的条件时才会被加载和解析。

　　　4.  解析顺序： CSS解析的规则遵循“后定义的规则会覆盖前定义的规则”（Cascade原则），如果两个CSS文件中存在相同的选择器，后面的CSS文件会覆盖前面的规则。

假设style1.css定义了：

   body { background-color: blue; }

而style2.css定义了：

   body { background-color: red; }

　　　　 由于style2.css在后面加载，最终网页的背景颜色会是红色。

  5.  重要性和优先级： 如果两个文件中定义了不同选择器或规则，CSS会根据优先级决定最终应用的样式。优先级顺序如下：

• • 内联样式（style属性） > 内部CSS > 外部CSS。
  • 样式规则的优先级（权重）由选择器的类型和复杂性决定。
    • 优先级顺序：内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符
    • !important强制优先，除非另一个规则也有!important且权重更高。
    • 声明顺序在优先级相同时决定覆盖规则。

      即使是后加载的CSS文件，也会受优先级和重要性影响。例如：

     /* style1.css */

     #header { color: blue; /* ID选择器优先级高 */ }

     /* style2.css */

     div { color: red; /* 元素选择器优先级低 */ }

无论加载顺序如何，#header的文本颜色会是蓝色。