9

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

1) 用户定义样式是次低优先级。为了用它覆盖其他样式，您需要使用 !important 将其移至最高。2) 它没有提到 <link> 与 <link> 中的 @import 和 @import 的相对优先级

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

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

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

还有什么遗漏吗？

PS：我在推断 !important 从 2-8 丢失。所以用户定义出现两次。一次重要，第二次不重要。所以用户定义本质上是第二低的。!important 自然可以应用于任何级别。

4

1 回答 1

7

与其按照最重要和最不重要的方式来考虑它，不如将其视为级联顺序。所有样式都已应用，但最后应用的样式是您看到的样式。样式按以下顺序应用：

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

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

!important使不太具体的样式在更具体的样式之后应用，而外部样式表样式在内部样式或内联样式之后应用。我建议!important尽可能不要使用，因为它会导致一些非常混乱的结果。

于 2011-02-18T10:12:09.757 回答