css样式表层次结构的重要性 [英] Importance of css stylesheet hierarchy

问题描述

我做了一些Google搜索，到目前为止，我还没有找到任何答案解答我的CSS顺序或重要性的问题。

I've done some Google searches and so far I haven't found anything that answers my question about CSS order or importance.

例如，内联覆盖外部。得到它了。添加！重要的外部可以覆盖内联。此外，从我以前教过的一切，后来的样式重写早期的风格。所以：

For example, inline overrides external. Got it. Adding !important externally can override inline. Also, from everything I've ever been taught, later styles override earlier styles. So:

h1 { font-size: 12pt; }
h1 { font-size: 14pt; }

会呈现14pt的字体大小。但这并不总是这样。有时我想定义样式：

would render a font-size of 14pt. But this isn't always the case. Sometimes I want to define styles like:

<div id="content">
    <input class="regular" type="text" />
    <input class="regular" type="text" />
    <input class="long" type="text" />

，然后在css中：

#content input { width: 50%; }
.long { width: 75%; }

但这并不总是起作用。在哪里可以看到重要性的顺序，因为所有这些都有特定的重要性级别：

but that doesn't always work. Where can I see the order of importance because all of these have specific importance levels:

input {} 
#content input {}
#content input.regular {}
#content input.long
input.regular {}
input.long {}
.regular {}
.long {}

我真的不喜欢写！我不能明确的确定重要性的顺序，那么有时我必须改变ids，类等。

I really don't like having to write !important ever but if I can't figure out the order of importance specifically, then sometimes I have to change ids, classes, etc.

推荐答案

当你有两个（或多个）CSS块，其选择器选择相同的元素，并且都尝试设置

When you have two (or more) CSS blocks whose selectors select the same element, and which both try to set the same property, then the block with the more specific selector wins out.

CSS 3选择器规范详细说明了如何计算特殊性，并且可以合理读取：

The CSS 3 selectors spec details how specificity should be calculated, and it’s reasonably readable:

• http：//www.w3 .org / TR / css3-selectors /＃specificity

• http://www.w3.org/TR/css3-selectors/#specificity

还有一些好的博客文章：

There are also some good blog posts that describe the rules too:

• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/


• http://reference.sitepoint.com/css/specificity

• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://reference.sitepoint.com/css/specificity

（请注意，当两个块具有相同特定性的选择器时，只有才会执行后一个块的规则在您的示例中使用 h1 。具有更具体选择器的块中的规则将用稍微不太具体的选择器来覆盖规则。）

(Note that when the two blocks have selectors with the same specificity, only then does the later block’s rule win out, as in your example with h1s. A rule in a block with a more specific selector will override a rule a later block with a less specific selector.)

这篇关于css样式表层次结构的重要性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！