我认为我对特异性和 !important 的工作原理有错误的理解。
考虑下面的 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>
样式.CSS
.outer .inner1 {
color:green !important;
}
STYLE1.CSS
.outer .inner1 .inner2 {
color:red ;
}
我的理解是 style.css 中的规则永远不会被覆盖(因为它有一个重要的标签)，即使 syle1.css 中的规则具有更多的特异性。 我认为规则会在 HTML 文件中遇到时应用(首先是 style.css，然后是 style1.css)，并且只有当规则更具体时(重要标记阻止)，元素的特定属性的值才会被覆盖无论后续规则多么具体，这一点都是最重要的)。这显然不是它的工作原理。有人可以告诉我 !important 和特异性如何工作以及什么时候使用 !important 吗？
最佳答案
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
--Specificity: Directly targeted elements vs. inherited styles
注意:在演示中添加新设计的规则集:
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
它的特异性得分为 0、0、7、4，非常可笑、不必要，而且还很重要。 CSS 从右向左读取:
- 查找
<aside>类别为.inner3的标签 - 它必须有一个父项
<div>其类别为.inner2. - 还有
<div class="inner2">必须有 parent<div>类别为.inner1. - 并且必须
<div class="inner1">有一个 parent<div>类(class).outer.
必须满足选择器的所有这些特定规则，以便深度嵌套 <aside>标签得到它的风格。 .inner3 的任何后代元素将继承color: blue属性和值，但它很容易被 i.inner2 之类的内容覆盖与 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 框底部的新规则集:
div {
color: black !important
}
现在这个选择器特定于所有 div，所以这里是 !important刚刚被分配了一个具有深远影响的选择器。这可能更像是您所期望的行为。
顺便说一句，您可能注意到了重复的类:
.outer.outer.outer
这称为选择器链接，它将增加选择器的特异性得分。请参阅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，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50458813/