覆盖的 CSS 规则何时优先？答案

【问题标题】：When do overriden css rules take precedence?覆盖的 CSS 规则何时优先？
【发布时间】：2018-02-16 11:18:15
【问题描述】：

我试图理解为什么被覆盖的 CSS 规则仍然优先于应该更特定于 CSS 的规则。它没有任何 !important 属性。（见下面的截图以及代码sn-p。）

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 规则指定的颜色。

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

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

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

【问题讨论】：

请把相关的HTML和CSS复制到这里，不要截图。另外，你在使用 Angular 吗？这很重要，您需要对其进行标记。
我们可以看看代码吗？
您之前访问过该链接吗？第一个更通用的样式也适用于:visited
@Rob - 已添加相关 CSS。该项目正在使用 Angular，但我不是从事该项目那部分工作的开发人员。
@Sidney - 目前这可能是不可能的。我需要获得批准才能将构建推送到面向公众的服务器......这可能比它的价值更麻烦。

标签： html css firefox sass

【解决方案1】：

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

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

一种常用的表示方式称为 base-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 个元素不会覆盖一个类，即使数学表明不是这样。

【讨论】：