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

Ответ 1

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

Текст Greyed/dimmed out может означать либо

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

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

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

div { 
  margin: 0;
}

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

Ответ 5

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

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

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

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

EDIT:

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

Ответ 6

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

Ответ 7

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