CSS特异性和！important [英] CSS specificity and !important
问题描述
我认为我对特异性和！important的工作方式有错误的理解.
I think I have a wrong understanding of how specificity and !important works .
考虑以下HTML:
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class = "outer">
<div class = "inner1">
<div class = "inner2">
<p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam
quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia,
et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do
commodo..</p>
</div>
</div>
</div>
STYLE.CSS
STYLE.CSS
.outer .inner1 {
color:green !important;
}
STYLE1.CSS
STYLE1.CSS
.outer .inner1 .inner2 {
color:red ;
}
我的理解是，即使syle1.css中的规则具有更高的特异性，style.css中的规则也不会被覆盖(因为它具有重要的标记).我当时认为规则是在HTML文件(首先是style.css，然后是style1.css)中遇到时应用的，并且仅当规则更具体时，元素的特定属性的值才会被覆盖(重要的标记可以防止无论后续规则有多具体，都应将此置于压倒性地位).这显然不是它的工作方式.有人可以告诉我！important和特异性如何工作，以及何时使用！important?
My understanding was the rule in style.css will never be overwritten (as it has an important tag) even though the rule in syle1.css has more specificity . I was thinking rules are applied as they are encountered in the HTML file ( style.css first and then style1.css) , and a value for a particular property of an element will be overwritten only if the rule is more specific ( important tag prevents this overriding no matter how specific the subsequent rule is ) . This apparently is not how it works . Could someone tell me how does !important and specificity work and when do you use !important ?
推荐答案
直接定位元素的样式始终优先于继承的样式，而不管继承规则的特殊性.
注意:在演示中添加了新的人为规则集:
Note: the addition of the new contrived ruleset in Demo:
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
它具有0,0,7,4和！important的极其荒谬的不必要的巨大特异性得分.CSS从右到左读取:
It has an incredibly ridiculously unnecessarily huge specificity score of 0,0,7,4 and !important as well. CSS reads from right to left:
- 使用类
.inner3查找 - 它必须有一个父类
< div>，其类为.inner2. - 另外，
< div class ="inner2">必须具有父类< div>，其类为.inner1 - 而且必须使
< div class ="inner1">的父类< div>具有.outer .
< aside> 标记- Find an
<aside>tag with the class of.inner3 - It must have a parent
<div>that has the class of.inner2. - Also that
<div class="inner2">must have a parent<div>with a class of.inner1. - And it's imperative that
<div class="inner1">have a parent<div>with the class of.outer.
必须满足选择器的所有这些特定规则，以便深度嵌套的< aside> 标签具有其样式. .inner3 的任何后代元素都将继承 color:blue 属性和值，但很容易被 i.inner2 之类的<代码:颜色:红色.
All of these specific rules of the selector must be met just so a deeply nested <aside> tag gets its style. Any descendant elements of .inner3 will inherit color: blue property and value, but it is easily overridden by the likes of i.inner2 with color:red.
<div class="inner3">
<p>This deeply nested text has <i class='inner2'>crazy specificity but this text is red.</i>
...
</p>
</div>
注意:位于CSS框底部的新规则集:
Note: the new ruleset at the bottom of CSS box:
div {
color: black !important
}
现在，此选择器特定于 所有divs ，因此这是为！important 刚刚分配了一个范围广泛的选择器的方式.这可能更像您期望的行为.
Now this selector is specific to all divs so here is how !important has just been assigned a selector with a far reaching scope. This is probably more like the behavior you were expecting.
顺便说一句，您可能会注意到重复的类:
BTW, you probably noticed the duplicate classes:
.outer.outer.outer
这称为选择器链接，它将增加选择器的特异性得分.请参见 在线特异性计算器 .
That is called selector chaining which will increase a selector's specificity score. See Online Specificity Calculator.
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
.outer .inner1 {
color: green !important;
}
.outer .inner1 .inner2 {
color: red;
}
div {
color:black !important;
}<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class="outer">
<div class="inner1">
This text will be green...
<div class="inner2">
<p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia, et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do commodo..
</p>
<aside class='inner3'>
<p>This deeply nested text has <i class='inner1'>crazy specificity</i>, yet it only applies to it and its descendants with no specific <b class='inner2'>`color` property</b>.</p>
</aside>
</div>
...and this text will be green as well.
</div>
</div>这篇关于CSS特异性和！important的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
