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

JGF*_*FMK 8 css css-cascade

我正在这里阅读一篇不错的文章: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. 外部样式表(<link>内的@import)
  7. 用户定义 - (浏览器首选项 - [不是谷歌浏览器!])
  8. 浏览器默认 - (随浏览器一起提供)

Michael Bowers Pro CSS和HTML设计模式也是一个很好的来源.但它没有提到内联.

还有什么遗漏?

PS:我在推测!重要的是从2-8缺失.因此用户定义出现两次.一旦重要,第二次没有它.因此,用户定义实质上是第二低的.!important可以自然地应用于任何级别.

Nat*_*nes 7

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

  1. 浏览器默认
  2. 外部样式表(link@import)
  3. 内部样式表
  4. 内联风格

在前三个中的任何一个中,样式从最不具体到最具体应用(如果最不具体,则从上到下应用).因此,选择标签的样式将在类选择的样式之前应用,因此如果他们不同意应该应用的样式,则选择的类将获胜.没有关于是否link@import应该首先应用的规则,因此它们混合在一起,并且适用最不具体到最具体的规则.

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

  • 不,`!important`总是胜过内联样式*除非*它们本身就是`!important`. (3认同)