Инструменты разработчика Chrome. Вкладка "Стиль", показывающая выцветшее определение CSS, почему?

Я использую Chrome в течение длительного времени, и я никогда (а не то, что я могу вспомнить) натолкнулся на определения CSS на панели "Стиль", которые исчезли. Селектор еще не определен.

Пример:

(Edit: просто чтобы быть ясным, я не имею в виду таблицу стилей пользовательского агента)

Я не могу понять, почему он бледен и что это значит. Определение представляется редактируемым, но любые изменения значений не сохраняются (т.е. Как только я нажимаю, он возвращается к исходному значению) и не влияет на веб-страницу.

Я не мог найти ссылки на это в документации для этого инструмента. Может ли любой из вас добрый народ пролить свет на это?

Ответ 1

"Увядшие" стили - это те, которые не применяются к выбранному тегу. Таким образом, на скриншоте у вас есть правило h1, которое является нормальным цветом - оно применяется к любому выбранному элементу - и у вас есть правило .SubHeader h1, которое не применяется к выбранному элементу.

Иногда вы увидите, что вы динамически добавляете правило CSS (кнопка + в инструментах chrome dev), но модифицируйте селектор, чтобы он не применялся к тому элементу, который вы выбрали.

Ответ 2

Это означает, что правило было унаследовано:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

Ответ 3

Это таблицы стилей, которые автоматически применяются браузером.

Это можно увидеть по описанию: user agent stylesheets.

Вы можете отключить это в настройке в нижнем правом углу, проверив Show user agent styles. Теперь стили не будут отображаться на вашей панели CSS (но все еще применяются!)

EDIT:

я неправильно прочитал ваш вопрос, dev-doc говорит следующее о правилах dimmed:

Примечание. Если вы отредактируете селектор так, чтобы он не соответствовал выбранному элементу, правило будет затемнено и, очевидно, не будет применяться к элементу. Вы редко должны это делать.

Ваш скриншот выглядит так, как будто это могло быть.