css样式表层次结构的重要性

Question

我已经完成了一些谷歌搜索，到目前为止我还没有找到任何能够回答我关于CSS顺序或重要性的问题。

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

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

会呈现14pt的字体大小。但情况并非总是如此。有时我想定义样式：

<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%; }

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

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

我真的不喜欢写作！重要但如果我不能明确地指出重要性的顺序，那么有时候我必须改变id，类等。

Answer 1

您要搜索的术语是“特异性”。

如果你有两个（或更多）CSS块，其选择器选择相同的HTML元素，并且都尝试在该元素上设置相同的CSS属性，那么具有更具体选择器的块将胜出。

CSS 3选择器规范详细说明了如何计算特异性，并且它具有合理的可读性：

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

还有一些很好的博客文章也描述了这些规则：

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

（注意，当两个块具有相同特异性的选择器时，只有才能使后一个块的规则胜出，如{{1}中的示例所示s。具有更具体选择器的块中的规则将覆盖具有较少特定选择器的稍后块的规则。）

Answer 2

您正在体验CSS特异性。如果您有两个适用于同一元素的冲突样式，则有一个加权系统可确定哪种样式获胜。你可以在这里阅读更多相关信息：

http://css-tricks.com/specifics-on-css-specificity/

Answer 3

对于这种情况，这就是你做的事情

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

选择具有其ID的元素将优先，因此您遇到了该特定问题。将ID添加到您的选择中并更具体地解决问题

例如：

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

比

更具体

#content .long { width: 75%; }