我有一个基本的 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 专家,所以对于这个可能是非常基本的问题,我深表歉意。
谢谢
最佳答案
顺序确实很重要,因为 CSS 规则可以被覆盖。如果多个规则匹配具有相同优先级的内容(相同的特异性;更具体的规则具有更高的优先级),最后一个规则将优先。不过,它并不特定于多个文件。如果这两个规则在同一个文件中,也会发生同样的情况。
在您的示例中,加载更通用的规则(没有媒体查询)会使带有查询的规则过时,因为它总是会被覆盖。反之亦然,因为一般规则只会在特定情况下被覆盖。
关于html - HTML 页面中 CSS 文件的顺序是否重要?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34500046/