Для меня текущие ответы не объяснили проблему достаточно полно, поэтому я добавляю этот ответ, который, надеюсь, может быть полезен для других.
Серый / затемненный текст, может означать либо
- это правило / свойство по умолчанию, применяемое браузером, которое включает в себя свойства по умолчанию.
- Это включает в себя наследование, которое немного сложнее.
наследование
Примечание. На панели «Стиль» инструментов Chrome dev отобразится набор правил, поскольку одно или несколько правил из набора применяются к выбранному в данный момент узлу DOM. Я думаю, для полноты картины dev tools показывает все правила из этого набора, независимо от того, применяются они или нет.
В случае, когда правило применяется к текущему выбранному элементу из-за наследования (то есть правило было применено к предку, а выбранный элемент унаследовал его), Chrome снова отобразит весь набор правил.
Правила, которые применяются к выбранному в данный момент элементу, отображаются в обычном тексте.
Если правило существует в этом наборе, но не применяется, потому что это не наследуемое свойство (например, цвет фона), оно будет отображаться в виде серого / затемненного текста.
Вот статья, которая дает хорошее объяснение - (Примечание: соответствующий пункт находится внизу статьи - рисунок 21 - к сожалению, соответствующий раздел не имеет заголовка) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033
Выдержка из статьи
Этот [сценарий наследования] может иногда создавать некоторую путаницу, потому что по умолчанию используются короткие свойства; На рисунке 21 показаны свойства по умолчанию сокращенного свойства свойства font вместе с ненаследуемыми свойствами. Просто имейте в виду контекст, который вы смотрите при изучении элементов.
Это означает, что правило было унаследовано, но не применимо к выбранному элементу:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
Живой пример: осмотрите элемент, содержащий текст "Hello, world!"
источник
Майкл Коулман имеет правильный ответ. Я просто хочу добавить простое изображение, чтобы согласиться с ним. Ссылка, которую он включил, имеет следующий простой пример: http://commandlinefanatic.com/art033ex4.html
HTML / DOM выглядит так ...
Панель стилей в Chrome выглядит следующим образом при выборе элемента p ...
Как видите, элемент p наследуется от своих предков (div). Так почему же стиль
background-color: blue
недоступен? Потому что это часть набора правил, который имеет как минимум один стиль, который наследуется. Этот наследуемый стильtext-indent: 1em
background-color:blue
не наследуется, но это часть набора правил, который содержитtext-indent: 1em
наследуемую информацию, и разработчики Chrome хотели быть полными при отображении наборов правил. Однако, чтобы отличить стили в наборе правил, которые являются наследуемыми, от стилей, которые не наследуются, стили, которые не наследуются, выделяются серым цветом.источник
div
s иp
. Вы увидите, чтоbackground-color
не отображается серым цветомdiv#two
. Ноbackground-color
затенено дляdiv#three
иp
.Это также происходит, если вы добавляете стиль через инспектор, но этот новый стиль не применяется к выбранному вами элементу. Обычно показанные стили - это только стили для выбранного элемента, поэтому серый цвет указывает, что только что добавленный стиль не выбирает элемент, который имеет фокус в навигаторе DOM.
источник
Это означает, что правило было заменено другим правилом с более высоким приоритетом. Например, таблицы стилей с:
Инспектор покажет правило
color:red;
серым цветом иcolor:blue;
обычно.Читайте о наследовании CSS, чтобы узнать, какие правила наследуются / имеют более высокий приоритет.
РЕДАКТИРОВАТЬ:
Смешение: серые правила - это неустановленные правила, которые используют специальную таблицу стилей по умолчанию, которая применяется ко всем элементам (правила, которые делают элемент визуализируемым, поскольку все стили должны иметь значение).
источник
font-size: 20px;
)При использовании webpack любое правило или свойство css, которое было изменено в исходном коде, выделяется серым цветом при перезагрузке страницы после перестроения. Это действительно раздражает и заставляет меня каждый раз перезагружать страницу.
источник
Новая версия Chrome Developer показывает, откуда он унаследован.
источник
Я отвечаю задолго до того, как у вопроса уже есть много правильных ответов, потому что я столкнулся с другим случаем, когда блок CSS-кода был серым и недоступным для редактирования в Chome DevTools: рассматриваемый блок содержал символы U + 200B ZERO WIDTH SPACE . Как только я нашел и удалил их, я снова смог редактировать блок в Chrome DevTools. Предположительно, это может произойти и с другими не-ascii персонажами, я не пытался это выяснить.
источник