Выигрывающий атрибут цвета CSS не соответствует результату

Я вижу странный сценарий, когда, согласно консоли Firefox, согласованный цвет для элемента css отличается от видимого. Если это имеет значение, я использую Bootstrap 3 в качестве источника стилизации. Вот (очень короткий) HTML файл, который я использую для примера.

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'; return false;" rel="stylesheet">

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

Вот скриншот из консоли Firefox dev с предполагаемым "выигрышным" правилом css для:

И вот скриншот фактической рендеринга браузера:

Как вы можете видеть, текст в кнопке отображается как белый. Из верхней части правил CSS, кажется, что белый, действительно, выбран. Но неясно, откуда это. Единственное правило: "it white (#FFF)" вычеркнуто, и единственное правило, которое не вычеркнуто, говорит "темно-серый (# 555)". Итак, почему текст белый?

Ответ 1

Интересное наблюдение! Похоже, что инструменты разработчика Firefox используют номер строки блока объявления для определения важности выбора, когда специфика двух селекторов одинакова.

Это может быть проблемой, когда файл CSS был миниатюрирован, и все блоки объявления попадают в одну строку.

Это становится более очевидным, если вы используете неминифицированный ресурс:

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

A JSFiddle с мини-CSS демонстрирует эту проблему, но не one используя полностью расширенный CSS.

Надеюсь, что это проливает свет на этот вопрос. Может быть, это стоит отчета об ошибке?

РЕДАКТИРОВАТЬ: Немного больше тестов указывает на то, что инструменты Firefox размещают приоритет в самом левом блоке, когда сталкиваются с несколькими селекторами одной и той же специфики в одной строке. (Пример.)

Ответ 2

Да, конечно, это странно, но если вы посмотрите на инспектора, я вижу, чего вы ожидаете: Должна быть ошибка с инструментами firefox dev?