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

让我们来深入理解CSS样式加载顺序及覆盖顺序。

CSS样式加载顺序

在了解CSS样式加载顺序之前，需要知道的是，浏览器渲染页面时采用了一种“流”的工作模式，即从上到下加载解析页面的各种元素。当浏览器解析到CSS样式时，会按照一个特定的顺序加载这些样式，具体如下：

浏览器默认样式：浏览器会首先加载自己的默认样式，这类样式在所有CSS样式中权重最低。
用户样式表：用户可以通过自己的样式表来定制页面样式。这类样式表的权重比默认样式高，但是比后面提到的!important和行内样式要低。
外部样式表：外部样式表是通过标签引用的CSS文件，在页面头部加载。这类样式的权重要比用户样式表的高，但比后面提到的!important和行内样式要低。
媒体查询：CSS3新增了媒体查询，用于根据不同的设备分辨率和特性加载不同的样式表。媒体查询内部样式表的加载顺序和上述样式表一致，即按照选择器权重从高到低依次加载。
!important修饰符：当样式被指定了!important修饰符时，这个样式拥有最高的优先级，即使位置在样式表的最前面，也会被后面的!important修饰符所覆盖。
行内样式：在HTML元素内部使用style属性可以定义该元素的样式。这类样式权重最高，可以覆盖其他所有样式。

在应用CSS样式时，可能会出现多个相同的样式同时作用于同一个HTML元素的情况，此时会按照一定的规则进行样式覆盖，具体如下：

在下面的样式中，p元素的最终颜色是紫色，而不是红色。因为行内样式覆盖了外部样式表的颜色样式，而且仅有的一个选择器权重相同的样式是后面的样式，所以p元素的最终样式是行内样式。

CSS样式：

p {
  color: red;
}

p {
  color: purple !important;
}

// HTML元素
<p style="color:purple">Hello World!</p>

在下面的样式中，h1元素的最终颜色是绿色，因为即使后面有!important修饰符，选择器权重和具体性都比行内样式低，所以h1元素的最终样式是外部样式。

CSS样式：

h1 {
  color: red;
}

header h1 {
  color: blue;
}

h1 {
  color: green !important;
}

// HTML元素
<header><h1 style="color:green">Hello World!</h1></header>

希望这个攻略能够让你完整、细致地理解CSS样式加载顺序及覆盖顺序，如果还有问题，欢迎提问。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css样式加载顺序及覆盖顺序深入理解 - Python技术站