获胜的CSS颜色属性与结果不匹配

Question

我看到一个奇怪的场景，根据Firefox开发者控制台，css元素的匹配颜色与可见输出不同。如果重要的话，我使用Bootstrap 3作为样式的来源。这是我用于示例的（非常短的）HTML文件。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

<button class="form-control btn btn-success">Hello world</button>

以下是Firefox开发者控制台的屏幕截图，其中包含所谓的'获胜'css规则：

以下是实际浏览器呈现的屏幕截图：

如您所见，按钮中的文本呈现为白色。从CSS规则的顶部看，确实选择了白色。但目前尚不清楚它的来源。唯一的规则是“它是白色的（#FFF）”被划掉，并且不划掉的唯一规则是“它是深灰色（＃555）”。那么为什么文字是白色的？

Answer 1

有趣的观察！当两个选择器的特异性相同时，Firefox开发人员工具似乎使用声明块的行号来确定选择器的重要性。

当CSS文件被缩小时，这可能是一个问题，并且所有声明块最终都在同一行。

如果您使用非缩小资源，则会更加明显：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

JSFiddle with the minified CSS出现此问题，但不是one using the fully expanded CSS。

希望这能为这个问题带来一些启示。也许它值得一个bug报告？

编辑：进行更多测试表明，当在一条线上面对多个相同特异性选择器时，Firefox工具会在最左侧块上放置优先级。 （An example.）

Answer 2

是的，这确实很奇怪，但如果你看看检查员，我会看到你的期望： firefox开发工具一定是个错误吗？