Web 加载程序如何将您的 CSS 读取为 html 页面

Question

我只想知道，如果我的网站（html page）加载全局.css文件，它是从上到下读取css还是相反？

示例：（如果这是我的全局.css文件）

.CSS：

.test {
  font-size: 14px;
}
.test {
  font-size: 20px;
}

如果这是在 css 文件中，它会先读取底部样式还是顶部样式？

Answer 1

它将应用适合 html 元素的选择器的最后样式。这意味着<div class="test">的字体大小将为 20px。但是，如果您定义以下样式：

div.test {
  font-size: 14px;
}
.test {
  font-size: 20px;
}

<div class="test">将适用font-size: 14px。这是由于选择器的特异性。第一个更具体。

您可以研究 css 特异性层次结构