css - 应用顺序的 CSS 文件

Question

我有一个关于 CSS 文件的问题，它是在浏览器中应用的顺序。我们有：

1. 浏览器（系统）CSS文件，
2. 用户 CSS 文件，
3. 用户 CSS 重要文件，
4. 网站 CSS 文件，
5. 网站 CSS 重要文件，

加载页面时，一些 CSS 代码会根据顺序或 !important 字词替换其他代码。我上面列出的顺序是否正确，所以网站 CSS 重要文件可以覆盖所有以前的样式？

Answer 1

CSS 代码不替换其他 CSS 代码，与解析样式表的顺序无关。实际上没有应用顺序，因为所有适用的样式表都被考虑在内。当多个样式表为一个元素的属性赋值时，冲突就根据级联规则解决。那么顺序是：

1. 用户代理声明（浏览器默认样式）

2. 用户正常声明

3. 作者（页面）正常声明

4. 作者（页）重要声明

5. 用户重要声明

所以作者（页面）!important声明胜过除用户!important声明之外的一切。在 Css 1 中，顺序有所不同，但在 CSS 2 中发生了变化，浏览器遵循当前规则：如果用户希望行使自己的权利，则始终拥有最终决定权。

Answer 2

不会。用户 CSS 文件将在站点 CSS 文件之后进行解析（否则拥有用户 CSS 文件没有任何意义）。这并不意味着它会自动覆盖网站 css 文件中的所有内容，但是，正常的CSS 特异性规则仍然适用。

让我们将所有段落都设为红色，例如我的网站有以下规则：

website.css: p { color: red; }

但是，如果我实现一个用户样式表（如 FireFox 中的 userContent.css）并说：

FireFox userContent.css: p { color: blue; }

文本颜色为蓝色。

如果我将网站的规则标记为重要：

website.css: p { color: red; !important }

颜色会再次变红。