Что это значит, когда правило CSS выделено серым цветом в инспекторе элементов Chrome?

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

194
browser css google-chrome inspector

8 ответов

для меня текущие ответы не объяснили проблему достаточно полно, поэтому я добавляю этот ответ, который, надеюсь, может быть полезен другим.

серый / затемненный текст, может означать или

  1. это правило/свойство по умолчанию, которое применяется браузером, которое включает в себя свойства short-hand по умолчанию.
  2. это включает в себя наследование, которое немного сложнее.

наследование

Примечание: Chrome dev tools на панели "стиль" будет отображаться набор правил, поскольку одно или несколько правил из набора применяются к выбранному в данный момент узлу DOM. Я думаю, для полноты, dev tools показывает все правила из этого набора, независимо от того, применяются они или нет.

в случае, когда правило применяется к выбранному элементу из-за наследования (т. е. правило было применено к предку, а выбранный элемент унаследовал его), chrome снова отобразит весь набор правил.

правила, применяемые к выбранному элементу, отображаются в обычном тексте.

Если правило существует в этом наборе, но не применяется, поскольку оно не наследуется (например, цвет фона), оно будет отображаться как серый/затемненный текст.

вот статья, которая дает хорошее объяснение - (Примечание: соответствующий пункт находится в нижней части статьи-рисунок 21-К сожалению, соответствующий раздел не имеет заголовка) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033

выдержка из статьи

этот [сценарий наследования] может иногда создавать некоторую путаницу, потому что по умолчанию свойства short-hand; рисунок 21 иллюстрирует дефолт short-hand свойства свойства font вместе с не унаследованными свойства. Просто осознавайте контекст, на который вы смотрите, когда изучение элементов.

70

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

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

панель содержит только свойства из правил, которые непосредственно применимы к выбранному элементу. Чтобы дополнительно отобразить унаследованные свойства, включите флажок Показать унаследованные. такие свойства будут отображаться в приглушенном шрифт.

greyed out rules are inherited from ancestors

живой пример: проверьте элемент, содержащий текст " Hello, world!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}
<div id="foo">Hello, world!</div>
71

Майкл Коулман имеет правильный ответ. Я просто хочу добавить простой образ, чтобы пойти вместе с ним. Ссылка, которую он включил, имеет этот простой пример:http://commandlinefanatic.com/art033ex4.html

HTML / DOM выглядит так...

HTML

панель стилей в Chrome выглядит так при выборе элемента p...

Styles Pane

как вы можете видеть, элемент P наследует от своих предков (ДИВС). Так почему же стиль background-color: blue серым цветом? Потому что это часть набора правил, который имеет по крайней мере один стиль, который наследуется. Этот наследуемый стиль text-indent: 1em

background-color:blue не наследуется, но является частью набора правил, который содержит text-indent: 1em что inhertiable и разработчики хрома хотел быть завершенным, когда отображение правило-наборы. Однако для различения стилей в наборе правил, которые наследуются от стилей, которые не являются, стили, которые не inhertable затеняются.

19

Это также происходит, если вы добавляете стиль через инспектор, но этот новый стиль не применяется к выбранному элементу. Обычно показанные стили относятся только к выбранному элементу, поэтому серый цвет указывает, что только что добавленный стиль не выбирает элемент с фокусом в навигаторе DOM.

10

Это означает, что правило было заменено другим правилом с более высоким приоритетом. Например таблицы стилей с:

h2 {
  color: red;
}
h2 {
  color: blue;
}

инспектор покажет правило color:red; серый и color:blue; нормально.

Читать далее наследование CSS чтобы узнать, какие правила наследуются/имеют более высокий приоритет.

EDIT:

Mixup: серые правила-это правила unset, которые используют специальную таблицу стилей по умолчанию, которая применяется к все elements (правила, которые делают элемент визуализируемым, потому что все стили должны иметь значение).

4

при использовании webpack любое правило или свойство css, которое было изменено в исходном коде, отображается серым цветом при перезагрузке страницы после перестроения. Это действительно раздражает и заставляет меня перезагружать страницу каждый раз.

1

enter image description here

новая версия chrome developer показывает, откуда она унаследована.

0

Я отвечаю долго после того, как вопрос уже имеет много правильных ответов, потому что я столкнулся с другим случаем, когда блок кода CSS был серым и неотредактированным в Chome DevTools: блок, о котором идет речь, содержал U + 200B символы пробела нулевой ширины. Как только я нашел их и удалил, я снова мог редактировать блок в Chrome DevTools. Предположительно, это может произойти и с другими не-ascii-символами, я не пытался это выяснить.

0