Инструменты разработчика 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:
Примечание. Если вы отредактируете селектор так, чтобы он не соответствовал выбранному элементу, правило будет затемнено и, очевидно, не будет применяться к элементу. Вы редко должны это делать.
Ваш скриншот выглядит так, как будто это могло быть.