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

订单很重要，因为可以覆盖CSS规则。如果多个规则匹配具有相同优先级的内容（相同的 特异性 ;更具体的规则具有更高优先级），则最后一条规则将占优势。但它并不特定于多个文件。如果这两个规则在同一个文件中，也会发生同样的情况。

在您的示例中，加载更一般的规则（没有媒体查询）会使带有查询的规则过时，因为它将始终被覆盖。反过来是有道理的，因为一般规则只会在特定情况下被覆盖。

Answer 2

简答：是的。

这实际上是我上周刚学过的一门课程，我会告诉你一个小时课程的简短版本，我告诉我的学生：

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

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

Answer 3

您希望了解一个非常重要的CSS概念，称为 Specificity 。

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

示例：

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

additional.css 可以具有<header>元素的特定样式，其中它指定标题选择器，如下所示：

header { background-color: red; }

但 mobile.css 可能包含.header类的选择器，在其中尝试执行以下操作：

.header { background-color: blue; }

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

中的规则

从架构的角度考虑CSS结构至关重要。我强烈建议您查看文件之间的差异，以便更好地了解媒体查询如何修改元素以及原因。

这里还简要讨论了Stack Overflow上提出的矛盾的CSS文件，您可能会发现这些文件很有帮助： Order of prioritization when using multiple contradictory css files 。

Answer 4

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

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

看：

@media (min-width:0px) {
  div {background: green}
}

div {height: 20px; background: red}

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

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

4 个答案: