获胜 CSS 颜色属性与结果不匹配
Winning CSS color attribute doesn't match with result
我看到一个奇怪的场景，根据 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 开发控制台的屏幕截图，其中包含据称的 'winning' css 规则：
下面是实际浏览器渲染的截图：
如您所见，按钮中的文本呈现为白色。从 CSS 规则的顶部来看，似乎确实选择了白色。但目前尚不清楚这是从哪里来的。唯一说 "it's white (#FFF)" 的规则被划掉了，唯一说 而不是 的规则说 "it's dark grey (#555)" 被划掉了。那为什么文字是白色的？
是的，这确实很奇怪，但是如果您改为查看检查员，我会看到您所期望的：
一定是 firefox 开发工具出错了？
有趣的观察！当两个选择器的特异性相同时，Firefox 开发人员工具似乎使用声明块的行号来确定选择器的重要性。
当 CSS 文件被缩小并且所有声明块都在同一行时，这可能是一个问题。
如果您使用非缩小资源，它会变得更加明显：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
一个JSFiddle with the minified CSS exhibits this problem, but not one using the fully expanded CSS.
希望这能对这个问题有所启发。也许值得提交错误报告？
编辑： 多一点测试表明，当在一行中遇到多个相同特异性的选择器时，Firefox 工具会优先考虑最左侧的块。 (An example.)
我看到一个奇怪的场景，根据 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 开发控制台的屏幕截图，其中包含据称的 'winning' css 规则：
下面是实际浏览器渲染的截图：
如您所见，按钮中的文本呈现为白色。从 CSS 规则的顶部来看，似乎确实选择了白色。但目前尚不清楚这是从哪里来的。唯一说 "it's white (#FFF)" 的规则被划掉了，唯一说 而不是 的规则说 "it's dark grey (#555)" 被划掉了。那为什么文字是白色的？
是的，这确实很奇怪，但是如果您改为查看检查员，我会看到您所期望的： 一定是 firefox 开发工具出错了？
有趣的观察！当两个选择器的特异性相同时，Firefox 开发人员工具似乎使用声明块的行号来确定选择器的重要性。
当 CSS 文件被缩小并且所有声明块都在同一行时，这可能是一个问题。
如果您使用非缩小资源，它会变得更加明显：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
一个JSFiddle with the minified CSS exhibits this problem, but not one using the fully expanded CSS.
希望这能对这个问题有所启发。也许值得提交错误报告？
编辑： 多一点测试表明，当在一行中遇到多个相同特异性的选择器时，Firefox 工具会优先考虑最左侧的块。 (An example.)