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

Question

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

Answer 1

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

Текст, выделенный серым цветом или затемненный, может означать либо

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

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

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

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

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

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

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

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

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

Answer 2

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

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>

Answer 3

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

HTML / DOM выглядит следующим образом ...

Панель стилей в Chrome выглядит следующим образом при выборе элемента p ...

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

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

Answer 4

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

Answer 5

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

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

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

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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