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

Question

我已经进行了一些 Google 搜索，但到目前为止我还没有找到任何可以回答我关于 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 {}

我真的不喜欢写 !important ever 但如果我不能明确地弄清楚重要性的顺序，那么有时我不得不更改 ID、类等。

Answer 1

您要搜索的词是“specificity”。

当您有两个(或更多)CSS block ，其选择器选择相同的 HTML 元素，并且都尝试在该元素上设置相同的 CSS 属性时，具有更具体选择器的 block 将胜出。

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

(请注意，当两个 block 的选择器具有相同特异性时，只有这样后一个 block 的规则才会胜出，如您的示例中的h1 s. block 中具有更具体选择器的规则将覆盖后面 block 中具有较不具体选择器的规则。)