当前位置：文江博客话题详情

!important 和 CSS 特异性之间的关系

发布于 2024-11-03 22:25:15 字数 370 浏览 1 评论 0原文

查看CSS特异性规范，没有提到有多少“点” >!important 规则是值得的。

什么时候一个人会覆盖另一个人？如果一个在另一个之后声明会发生什么？哪条规则被认为更重要？有某种模式吗？

从外观来看，!important 适用于首先具有更多特异性点的内容。但是如果我声明一个无数的 id 与类堆叠并且嵌套得很深，会发生什么？它会覆盖另一个标有 !important 的不太具体的规则中设置的规则吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

断桥再见 2024-11-10 22:25:15

CSS 中的特殊性仅涉及选择器，而不涉及其关联的声明。 !important 适用于声明，因此它本身在特异性方面不起任何作用。

但是， !important 会影响级联，当多个相同的属性声明应用于某个元素时，该元素的样式的整体计算。或者，正如 Christopher Altman 简洁地描述的：

!important 是一张黑桃牌。它胜过所有特殊点。

不仅如此：因为它会影响整体级联，如果您有多个 !important 选择器，并且其规则包含与同一元素匹配的 !important 声明，则选择器特异性将继续申请。同样，这只是由于有多个规则适用于同一元素。

换句话说，对于同一样式表（例如相同的用户样式表、相同的内部作者样式表或相同的外部作者样式表）中具有不同选择器的两个规则，将应用具有最具体选择器的规则。如果存在任何 !important 样式，则规则中具有最具体选择器的样式获胜。最后，由于你只能拥有重要或不重要的东西，所以这就是你能影响级联的最大程度。

下面是 !important 的各种用法及其应用方式的说明：

!important 声明始终会覆盖没有它的声明（IE6 及更早版本中除外））：

/* 在

如果有多个 !important 在具有相同具体级别的规则中声明，后声明的获胜：

/* 在

如果您声明相同的规则并且相同的属性位于两个不同的位置，如果两个声明都很重要，则 !important 遵循级联顺序：

/* 在外部链接的样式表中 */ ＃ID { 颜色：红色！重要； } /* 在

对于以下 HTML：
```
Text;
```
如果您有两条不同的规则和一条!important：
```
#id {
    颜色: 红色;
}

。班级 {
    颜色：蓝色！重要；
}
```
!important 总是获胜。
但是当你有多个!important时：
```
#id {
    颜色：红色！重要；
}

。班级 {
    颜色：蓝色！重要；
}
```
#id 规则有一个更具体的选择器，因此一个获胜。

Specificity in CSS only concerns selectors, not their associated declarations. !important applies to a declaration, so it alone plays no role in specificity.

However, !important influences the cascade, which is the overall calculation of styles for a certain element when more than one of the same property declaration applies to it. Or, as Christopher Altman succinctly describes:

!important is a spades card. It trumps all specificity points.

But not only that: because it influences the cascade overall, if you have more than one !important selector with a rule containing an !important declaration matching the same element then selector specificity will continue to apply. Again, this is simply due to having more than one rule applying to the same element.

In other words, for two rules with unequal selectors in the same stylesheet (e.g. same user stylesheet, same internal author stylesheet, or same external author stylesheet), the rules with the most specific selector apply. If there are any !important styles, the one in the rule with the most specific selector wins. Finally, since you can only have something that's either important or not, that's quite as far as you can go in influencing the cascade.

Here's an illustration of the various uses of !important and how they're applied:

The !important declaration always overrides the one without it (except in IE6 and older):
```
/* In a <style> element */
#id {
    color: red !important;
    color: blue;
}
```
If there is more than one !important declaration in a rule with the same level of specificity, the later-declared one wins:
```
/* In a <style> element */
#id {
    color: red !important;
    color: blue !important;
}
```

If you declare the same rule and the same property in two different places, !important follows the cascading order if both declarations are important:

/* In an externally-linked stylesheet */
#id {
    color: red !important;
}

/* In a <style> element appearing after the external stylesheet */
#id {
    color: blue !important; /* This one wins */
}

For the following HTML:
```
<span id="id" class="class">Text</span>
```
If you have two different rules and one !important:
```
#id {
    color: red;
}

.class {
    color: blue !important;
}
```
That !important always wins.
But when you have more than one !important:
```
#id {
    color: red !important;
}

.class {
    color: blue !important;
}
```
The #id rule has a more specific selector, so that one wins.