HTML 页面中 CSS 文件的顺序是否重要？

Question

我有一个基本的 HTML 页面和三个 CSS 文件。第一个 CSS 文件 (core.css) 用于所有页面通用的一组非常通用的规则。第二个文件 (additional.css) 包含特定于页面（主页、博客页面等）项目的规则。第三个 CSS 文件 (mobile.css) 包含移动显示的所有媒体查询。我也在使用 Bootstrap.

当文件按此顺序加载时：-

core.css
mobile.css
additional.css

浏览器未获取 mobile.css 中包含的以下媒体查询。

当文件按此顺序加载时：- - core.css - additional.css - mobile.css

mobile.css 中包含的以下媒体查询工作正常。

additional.css CSS 查询

.blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p {
    text-align: right;
}

mobile.css CSS 查询

@media (min-width:768px) and (max-width:992px) {
    .blog .blog-item h4, .blog .blog-item .item-date, .blog .blog-item p, .blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p {
        text-align: center;
    }
}

在@media 查询运行之后必须首先加载顶部样式规则是否有任何原因？什么优先，因为我假设如果屏幕宽度在 768px 和 992px 之间，那么这条规则将运行，而不是原始规则？

我是 CSS 的新手，我是 .NET 专家，所以很抱歉问了一个非常基本的问题。

谢谢

Answer 1

除非您的样式表 additional.css 有一个指定屏幕不在 768 和 992 像素之间的媒体查询，否则没有理由不加载它（意思是：是的，它们会正常加载，除非您特别指定取消它）。

媒体查询不影响特异性。因此，经验法则是将所有媒体查询放在最后，因为您只剩下特异性和顺序（最后的规则覆盖所有以前的具有相同的特异性）。

看：

@media (min-width:0px) {
  div {background: green}
}

div {height: 20px; background: red}

<div>Nope, I won't be green</div>

Answer 2

顺序很重要，因为 CSS 规则可以被覆盖。如果多个规则匹配相同优先级的东西（相同specificity；更具体的规则优先级更高），以最后一个规则为准。不过，它并不特定于多个文件。如果这两个规则在同一个文件中，也会发生同样的情况。

在您的示例中，加载更通用的规则（没有媒体查询）会使带有查询的规则过时，因为它总是会被覆盖。反之亦然，因为一般规则只会在特定情况下被覆盖。

Answer 3

简答：是的。

这实际上是我上周刚教的一门课，我会告诉你一个简短的版本 one-hour class 我告诉我的学生：

Bootstrap首先建立框架
遵循任何支持样式表（Owl.css、plugins.css 等）
接下来是您的自定义样式表。这是为了覆盖以上所有内容。
最后，响应式样式表。这个将根据浏览器中满足的媒体查询条件系统地和编程地覆盖以上所有内容。

采用这种类型的架构将大大减少（重要！）的数量。

Answer 4

您想知道一个非常重要的 CSS 概念，称为 Specificity。

如果影响媒体查询的元素在 CSS 文件之间具有相同的特异性，则可能会发生冲突。

示例：

<header class="header">Some header and stuff here</header>

additional.css 可以为 <header> 元素指定特定样式，它指定 header 选择器，如下所示：

header { background-color: red; }

但是 mobile.css 可能包含 .header class 的选择器，它会尝试执行以下操作：

.header { background-color: blue; }

由于特殊性规则，猜猜哪一个适用？ additional.css

中的规则

这就是从架构的角度思考 CSS 结构的关键所在。我强烈建议您查看文件之间的差异，以更好地了解媒体查询如何修改元素以及原因。

这里还有一个关于 Stack Overflow 上询问的相互矛盾的 CSS 文件的简短讨论，您可能会觉得有帮助：Order of prioritization when using multiple contradictory css files.

HTML 页面中 CSS 文件的顺序是否重要？

Should the order of CSS files in a HTML page matter?

html

css

media-queries

twitter-bootstrap-3