html - 网络加载器如何将您的 CSS 读取到 html 页面

Question

我只想知道，如果我的网站(html 页面)加载了 global.css 文件，它是从上到下还是从相反方向读取 css？

示例:(如果这是我的 global.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 specificity hierarchy