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

Question

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

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

• 核心.css
• mobile.css
• additional.css

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

当文件按此顺序加载时:- - 核心.css - 额外的.css - 移动.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 规则可以被覆盖。如果多个规则匹配具有相同优先级的内容(相同的特异性；更具体的规则具有更高的优先级)，最后一个规则将优先。不过，它并不特定于多个文件。如果这两个规则在同一个文件中，也会发生同样的情况。

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