什么时候重写css规则优先？

Question

我试图理解为什么被覆盖的CSS规则仍然优先于应该更具CSS特性的规则。它没有任何!important属性。 （请参阅下面的屏幕截图以及代码段。）

header a {
    color: #fff;
}

a, a:active, a:focus, a:hover, a:visited {
    color: #001e62;
    text-decoration: none;
}

在Firefox开发人员工具中，我看到所有a元素都有特定颜色（此屏幕截图中为＃001e62）。之后，我指定所有header a链接应该是不同的颜色（在此示例中为白色）。 Firefox开发人员工具报告a规则覆盖了header a规则。但是，在页面的实际渲染中，链接颜色仍然是更通用的a规则指定的颜色。

对于那些想知道的人来说，此屏幕截图中span标记内的a没有与之关联的任何颜色样式。

如果重要，我在Windows 7上使用Firefox 55.0.3。 任何有关为何发生这种情况的见解都会有所帮助。到目前为止，这种行为仅在Firefox中出现。 Chrome和IE不会这样做。

经过一些初步的谷歌搜索，我认为这可能是因为怪癖模式应用了一些奇怪的继承规则，但我只是有一个标准的HTML5 DOCTYPE标签，所以我不认为这应该是一个问题..它应该处于完全标准模式。

Answer 1

您正在寻找的概念称为CSS Specificity。

简而言之，样式表中的每个规则都会根据规则定义中使用的选择器类型给出权重。

表示这种情况的常用方法称为基础10特异性。

要计算基础10特异性，您需要：

  The number of elements and pseudo-elements * 1
+ The number of elements and pseudo-elements * 10
+                         The number of ID's * 100
+ For inline styles                            1000
+ For !important properties (not rules)        10000

因此对于此规则：#mypage .rule1:hover p:before

P & :before     = 2 * 1   =   1
.rule1 & :hover = 2 * 10  =  20
#mypage         = 1 * 100 = 100
For a total specificity of: 121

所有匹配规则都是从最不具体到最具体的应用，其属性会覆盖以前的值。

具有相同特异性的多个规则按照它们在样式表中的显示顺序应用。

具有!important标志的属性也会根据具有!important标志的多个规则的特异性覆盖。

这应该足以让你入门。请注意，浏览器实际上并没有使用base-10方法，而只是在脑海中进行数学计算的简单方法。所以11个元素不会覆盖一个类，即使数学建议不这样做。