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

Question

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

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

1349 8

google-chrome css browser inspector

8 ответов:

Comments

Ничего не найдено.

Michael Coleman · Accepted Answer · 2016-11-21 14:55:51

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

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

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

это включает в себя наследование, которое немного сложнее.

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

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

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

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

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

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

отрывок из статьи

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

Rob Sobers · Accepted Answer · 2016-07-03 00:19:17

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

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>

Niko Bellic · Accepted Answer · 2015-08-28 00:55:03

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

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

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

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

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

AaronLS · Accepted Answer · 2014-03-18 22:38:58

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

tcooc · Accepted Answer · 2010-07-16 17:38:49

Это означает, что правило было заменено другим правилом с более высоким приоритетом. Например таблицы стилей с:
h2 {
  color: red;
}
h2 {
  color: blue;
}
инспектор покажет правило color:red; серый и color:blue; нормально.

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

EDIT:

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

user2528531 · Accepted Answer · 2016-08-01 14:27:33

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

cepix · Accepted Answer · 2017-09-19 00:17:52

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

davidreedernst · Accepted Answer · 2018-04-19 23:50:42

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