不同级别的CSS和彼此之间的优先级 [英] Different levels of CSS and the priority over each other

问题描述

我在此处阅读有关此主题的不错的文章: http://www. plus2net.com/html_tutorial/css-types.php 在搜索字词CSS样式表优先级方面，它在Google排名中名列前茅. 但是，我认为该网站误导了您，并且不完整！有人可以证实我的怀疑吗?

I was reading a decent article here on this topic: http://www.plus2net.com/html_tutorial/css-types.php It came out highest ranked by Google for the search term css style sheets priorities. However I think the site misinforms you and is incomplete! Can someone confirm my suspicions?

1)用户定义样式是第二低的优先级.为了使用它来覆盖其他样式，您需要使用！important将其移到最高位置. 2)没有提及< link>的相对优先级.与< link>

1) User Defined style is second lowest priority. In order to override other styles with it, you need to use !important to move it to highest. 2) It fails to mention the relative priorities of <link> versus @import and @import within <link>

更精确的排序是(1胜2等):

A more precise ordering would be (1 wins over 2 etc) :

1. 用户定义(浏览器偏好！重要-[不是Google Chrome浏览器！])
2. 内联样式表(HTML节点上的样式属性)
3. 内部样式表(< head>中的< style>)
4. 外部样式表(@import)
5. 外部样式表(< link>)
6. 外部样式表(@import在< link>内部)
7. 用户定义-(浏览器首选项-[不是Google Chrome浏览器！])
8. 浏览器默认设置-(与浏览器一起提供)

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

Michael Bowers Pro CSS & HTML Design Patterns is a good source for this too. But it fails to mention inline.

还有其他遗漏吗?

PS:我推断！重要在2-8中缺失.因此，用户定义出现了两次.一次重要，第二次不重要.因此，用户定义在本质上是第二低的.当然，！important可以应用于任何级别.

PS: I was inferring !important was missing from 2-8. So User defined appears twice. Once with important, the second time without it. So user defined is in essence second lowest. The !important can naturally be applied at any level.

推荐答案

不是将其视为最重要和最不重要的，而是将其视为层叠顺序.应用所有样式，但是最后应用的样式是您看到的样式.样式按以下顺序应用:

Rather than thinking of it in terms of most important and least important, think of it as cascade order. All the styles are applied, but the last applied one is the one which you see. Styles are applied in the following order:

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

1. Browser default
2. External style sheet (link or @import)
3. Internal style sheet
4. Inline style

在前三个中的任何一个中，样式都是从最不具体到最具体(如果无法确定最具体则从上到下)应用.因此，标签选择的样式将在类选择的样式之前应用，因此，如果他们不同意应应用哪种样式，则类选择的样式将获胜.没有关于应先应用link还是@import的规则，因此将它们混合在一起并适用从最小到最具体的规则.

Within any one of the first three, styles are applied from least specific to most specific (then from top to bottom if the most specific can't be determined). So a tag-selected style will be applied before a class-selected style, so if they disagree about what style should be applied, the class-selected one will win. There is no rule about whether link or @import should be applied first, so they are mixed together and the least-specific-to-most-specific rule applies.

!important使较不特定的样式在更具体的样式之后应用，而外部样式表样式在内部的样式或内联样式之后应用.我建议不要使用!important，因为它会导致一些令人困惑的结果.

!important makes a less specific style get applied after a more specific one, and an external style sheet style get applied after an internal one or an inline style. I would advise against using !important wherever possible though, as it can cause some pretty confusing results.

这篇关于不同级别的CSS和彼此之间的优先级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！