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

【问题标题】：Importance of css stylesheet hierarchycss 样式表层次结构的重要性
【发布时间】：2012-07-17 19:29:05
【问题描述】：

我已经进行了一些 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、类等。

【问题讨论】：

标签： css

【解决方案1】：

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

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

CSS 3 选择器规范详细说明了应如何计算特异性，并且可读性强：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

例如：

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

比

更具体

#content .long { width: 75%; }

【讨论】：