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

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

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

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

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

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

Примечание. На панели «Стиль» инструментов 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!"

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 персонажами, я не пытался это выяснить.