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，但是如果我无法弄清楚重要性的顺序，那么有时我必须更改id，class等。

Answer 1

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

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

（请注意，当两个块的选择器具有 相同的 特异性时， 只有
后来的规则才胜出，如您的示例中的h1s。具有更具体选择器的块中的规则将覆盖带有不太具体的选择器。）