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

顺序做的事情,因为CSS规则可以被覆盖.如果多个规则匹配具有相同优先级的内容(相同的特异性 ;更具体的规则具有更高的优先级),则以最后的规则为准.但它并不特定于多个文件.如果这两个规则在同一个文件中,也会发生同样的情况.

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