CSS 样式表层级的重要性

Question

13

我已经进行了一些谷歌搜索，到目前为止还没有找到关于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等。

- o_O

1

http://css-tricks.com/specifics-on-css-specificity/ - Madara's Ghost

3个回答

7

你遇到了CSS特异性问题。如果有两个冲突的样式应用于同一个元素，那么有一个加权系统来确定哪个样式获胜。你可以在这里阅读更多相关信息：http://css-tricks.com/specifics-on-css-specificity/。

- mynameiscoffey

太好了，这个链接让我终于明白了（所以我不再需要在我的CSS中随意使用!important标识了，耶！） - huzzah

4

针对这种情况，你需要执行以下操作：

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

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

例如：

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

比之前的更具体

#content .long { width: 75%; }

- Ibu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul D. Waite · Accepted Answer

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

当你有两个（或更多）CSS块，它们的选择器选择同一个HTML元素，并且都尝试在该元素上设置相同的CSS属性时，具有更具体选择器的块获胜。

CSS 3选择器规范详细说明了如何计算特异性，并且它相当易读。

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

请注意，当两个块具有具有相同特异性的选择器时，仅当后一个块的规则胜出时，例如您的h1示例。更具体选择器的块中的规则将覆盖较不具体选择器的后续块中的规则。