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

Posted 2023-03-06

【中文标题】HTML 页面中 CSS 文件的顺序是不是重要？

【英文标题】：Should the order of CSS files in a HTML page matter?HTML 页面中 CSS 文件的顺序是否重要？

【发布时间】：2016-04-02 16:30:42

【问题描述】：

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

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

core.css mobile.css additional.css

mobile.css 中包含的以下媒体查询不会被浏览器拾取。

当文件按此顺序加载时：- - 核心.css - 附加.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 人，所以对于可能是一个非常基本的问题表示歉意。

谢谢

【问题讨论】：

请分享additional.css 中针对这些类的任何规则：blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p

【参考方案1】：

顺序确实很重要，因为 CSS 规则可以被覆盖。如果多个规则匹配具有相同优先级的事物（相同的特异性；更具体的规则具有更高的优先级），最后的规则将优先。但是，它并不特定于多个文件。如果这两个规则在同一个文件中，也会发生同样的情况。

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

【讨论】：

本质上就是“CSS”中的“C”表示的意思。

【参考方案2】：

简短回答：是的。

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

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

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

【讨论】：

这如何回答他的问题？据我了解，这是一个关于if 和why 的问题。不是如何。无论如何，他似乎接受了你的回答，所以我显然错了。

【参考方案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。

【参考方案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>

【讨论】：

是的，迫不及待想听听那次投票背后的精彩推理。