不同级别的CSS和优先级相互之间

Question

我在这里读到一篇不错的文章：http://www.plus2net.com/html_tutorial/css-types.php 谷歌在搜索字词css样式表优先级方面排名最高。 但是我认为网站误导你并且不完整！有人可以证实我的怀疑吗？

1）用户定义的样式是第二低的优先级。要使用它覆盖其他样式，您需要使用！important将其移动到最高位置。 2）没有提及＆lt; link＆gt;的相对优先级。与＆lt; link＆gt;

中的@import和@import对比

更精确的排序是（1胜2比等）：

1. 用户定义（浏览器首选！重要 - [不是谷歌浏览器！]）
2. 内联样式表（HTML节点上的样式属性）
3. 内部样式表（＆lt; style＆gt; in＆lt; head＆gt;）
4. 外部样式表（@import）
5. 外部样式表（＆lt; link＆gt;）
6. 外部样式表（@import inside＆lt; link＆gt;）
7. 用户定义 - （浏览器首选项 - [不是谷歌浏览器！]）
8. 浏览器默认 - （随浏览器提供）

Michael Bowers Pro CSS & HTML Design Patterns也是一个很好的消息来源。但它没有提到内联。

还有什么遗漏吗？

PS：我在推断！重要的是2-8缺失了。因此用户定义出现两次。一旦重要，第二次没有它。因此，用户定义实质上是第二低的。 ！important当然可以在任何级别应用。

Answer 1

不是从最重要和最不重要的角度考虑它，而是将其视为级联顺序。应用所有样式，但最后应用的样式是您看到的样式。样式按以下顺序应用：

1. 浏览器默认
2. 外部样式表（link或@import）
3. 内部样式表
4. 内联样式

在前三个中的任何一个中，样式从最不具体到最具体应用（如果无法确定最具体，则从上到下应用）。因此，选择标签的样式将在类选择的样式之前应用，因此如果他们不同意应该应用的样式，则选择的类将获胜。关于是否应首先应用link或@import没有规则，因此将它们混合在一起，并应用最不具体到最具体的规则。

!important使更具体的样式在更具体的样式之后应用，并且在内部样式或内联样式之后应用外部样式表样式。我建议尽可能不使用!important，因为它可能会导致一些令人困惑的结果。