css 样式表层次结构的重要性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11529495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Importance of css stylesheet hierarchy
提问by o_O
I've done some Google searches and so far I haven't found anything that answers my question about CSS order or importance.
我已经做了一些谷歌搜索，到目前为止我还没有找到任何可以回答我关于 CSS 顺序或重要性的问题的内容。
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:
例如，内联覆盖外部。知道了。在外部添加 !important 可以覆盖内联。此外，从我所学过的一切来看，后来的风格会覆盖早期的风格。所以：
h1 { font-size: 12pt; }
h1 { font-size: 14pt; }
would render a font-size of 14pt. But this isn't always the case. Sometimes I want to define styles like:
将呈现 14pt 的字体大小。但情况并非总是如此。有时我想定义如下样式：
<div id="content">
<input class="regular" type="text" />
<input class="regular" type="text" />
<input class="long" type="text" />
and then in css:
然后在 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 {}
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.
我真的不喜欢写 !important ，但如果我不能具体弄清楚重要性的顺序，那么有时我必须更改 ids、classes 等。
采纳答案by Paul D. Waite
The term you want to search for is “specificity”.
您要搜索的术语是“特异性”。
When you have two (or more) CSS blocks whose selectors select the same HTML element, and which both try to set the same CSS property on that element, then the block with the more specific selector wins out.
如果您有两个（或更多）CSS 块，其选择器选择相同的 HTML 元素，并且都尝试在该元素上设置相同的 CSS 属性，那么具有更具体选择器的块将胜出。
The CSS 3 selectors spec details how specificity should be calculated, and it's reasonably readable:
CSS 3 选择器规范详细说明了应如何计算特异性，并且它具有合理的可读性：
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
(Note that when the two blocks have selectors with the samespecificity, only thendoes 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.)
（请注意，当两个块具有具有相同特异性的选择器时，只有在后面的块的规则才会胜出，如您的示例中的h1s。具有更具体选择器的块中的规则将覆盖具有不太具体的选择器。）
回答by mynameiscoffey
You are experiencing CSS Specificity. If you have two conflicting styles that apply to the same element, there is a weighting system that determines which style wins. You can read more about it here:
您正在体验 CSS 特异性。如果您有两种相互冲突的样式应用于同一元素，则有一个权重系统可以确定哪种样式获胜。你可以在这里读更多关于它的内容：
回答by Ibu
For this case here is what you do
对于这种情况，这就是你要做的
#content input { width: 50%; }
#content .long { width: 75%; }
selecting an element with its ID will take precedence, hence you had that particular problem. adding the ID to your selection and being more specific will solve the problem
选择具有其 ID 的元素将优先，因此您遇到了特定问题。将 ID 添加到您的选择中并更具体将解决问题
for example :
例如 ：
#content input.long { width: 75%; }
is even more specific than
甚至比
#content .long { width: 75%; }
