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

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

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

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

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

Примечание. На панели «стиль» инструментов разработчика Chrome будет отображаться набор правил, поскольку одно или несколько правил из набора применяются к текущему выбранному узлу DOM. Думаю, для полноты картины инструменты разработчика показывают все правила из этого набора, независимо от того, применяются они или нет.

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

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

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

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

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

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

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

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

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

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

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

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

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

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

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

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

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

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

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

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

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

РЕДАКТИРОВАТЬ:

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

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

В новой версии Chrome Developer показано, откуда он унаследован.

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