html - 获胜的 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 开发人员工具似乎使用声明 block 的行号来确定选择器的重要性。

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

如果您使用非缩小资源，它会变得更加明显:

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

A JSFiddle with the minified CSS出现这个问题，但不是one using the fully expanded CSS .

希望这能阐明这个问题。也许值得提交错误报告？

编辑:更多的测试表明，当在一行中遇到多个相同特异性的选择器时，Firefox 工具会将优先级放在最左边的 block 上。 ( An example. )