Winning CSS color attribute doesn't match with result

Question

I'm seeing a strange scenario where, according to the Firefox dev console, the matched color for a css element is different from the visible output. If it matters, I'm using Bootstrap 3 as the source of styling. Here is the (very short) HTML file that I'm using for the example.

<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>

Here is a screenshot from the Firefox dev console with the purported 'winning' css rule for:

And here is a screenshot of the actual browser rendering:

As you can see, the text in the button is rendered as white. From the top of the CSS rules, it appears that white was, indeed, selected. But it's not clear where that comes from. The only rule say "it's white (#FFF)" is crossed out, and the only rule that's not crossed out says "it's dark grey (#555)". So why is the text white?

Answer 1

Interesting observation! It would appear that the Firefox developer tools use the line number of the declaration block to determine selector importance, when the specificity of two selectors is the same.

This can be an issue when the CSS file is minified though, and all declaration blocks end up on the same line.

It becomes more apparent if you use the non-minified resource:

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

A JSFiddle with the minified CSS exhibits this problem, but not one using the fully expanded CSS.

Hope this sheds some light on the issue. Maybe it's worth a bug report?

EDIT: A bit more testing indicates that the Firefox tools places precedence on the left-most block when faced with multiple same-specificity selectors on a single line. (An example.)