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

249

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

Роб Соберс
источник

Ответы:

96

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

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

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

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

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

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

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

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

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

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

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

Майкл Коулман
источник
10
Утверждение «правила, которые наследуются, но не применяются , они будут отображаться в виде серого / затемненного текста», не соответствует действительности. Если не применяется, они будут зачеркнуты. Я обновил свой ответ скриншотом и живым примером.
Роб Соберс
10
Это правильный ответ !!! Ключевое предложение звучит так: «Если правило существует в этом наборе, но не применяется, потому что это не наследуемое свойство (например, цвет фона), оно будет отображаться в виде серого / затемненного текста».
Нико Беллик
Это определенно правильный ответ. Если в разделе появляется неактивное свойство, которое гласит «Унаследовано от [selector]», то это не наследуемое свойство, которое не применяется к текущему элементу. Любое зачеркнутое свойство было переопределено более конкретным стилем.
только
1
Если правила неактивны, когда они не наследуются, почему мой элемент div имеет неактивные правила «ширины»? Разве ширина не наследуется? Кстати, я спрашиваю об этом серьезно.
Moosefetcher
1
... Так что, если вы видите, что Chrome выполняет правила CSS, которые очень часто применяются - где вы можете снять их (или изменить их значения) и увидеть соответствующее изменение на странице - возможно, это правило влияет на элемент но не применяется к этому элементу в частности, но к родителю.
Бен Уилер
82

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

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>

Роб Соберс
источник
13
@Rob Если быть точным, когда стиль отображается серым, это означает, что он унаследован от какого-либо другого охватывающего элемента, но не применим к выбранному элементу . Из документации: «Панель содержит только свойства из правил, которые непосредственно применимы к выбранному элементу. Чтобы дополнительно отобразить унаследованные свойства, установите флажок« Показать унаследованные ». Такие свойства будут отображаться затемненным шрифтом».
drkvogel
2
@RobSobers К сожалению, я не думаю, что ваш пример демонстрирует наследование. Где родительский предок, от которого наследуется div? Если вы прокрутите вниз панель «Стили» в Chrome, то увидите разделы «Унаследованные от ...». Что означают там серые правила? Вы можете включить это в пример?
Нико Беллик
8
Я не понимаю, почему этот ответ. помечен как лучший ответ и б. имеет так много голосов. Это явно неправильно. Поля не являются наследуемыми свойствами ( stackoverflow.com/a/5612360/24267 ) Ответ Майкла Колемана является правильным. О, ты не имеешь в виду наследование от элемента предка, ты имеешь в виду ... Я не уверен, что ты имеешь в виду именно. Во всяком случае, этот ответ не верен в 2015 году, с Chrome 46.
mhenry1384
3
Понятно, что голоса за магию MS Paint со стрелками и эффектом пузырьковой тени. признано неверным.
Дэвид
2
@ mhenry1384 «а» легко объяснимо: потому что оно написано человеком, который задал вопрос.
Эндрю Гримм
27

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

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

HTML

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

Панель стилей

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

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

Нико Беллик
источник
1
Это лучший ответ, так как он дает простую демонстрацию. Откройте этот URL на новой вкладке и используйте Chrome Developer Tools, чтобы выбрать различные divs и p. Вы увидите, что background-colorне отображается серым цветом div#two. Но background-colorзатенено для div#threeи p.
wisbucky
отличное объяснение
Дирк Бур
10

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

AaronLS
источник
Это была моя проблема. Спасибо!
Чак Ле Батт
5

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

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

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

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

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

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

tcooc
источник
Я только что проверил это, и я думаю, что это неправильно. В случае, если правило переопределено, будет зачеркнут (как показывает мой вопрос). Смотрите: yfrog.com/f/j3fooep
Роб Соберс
@Rob: перепутал, так как devtools не запускался. Я запустил его и отредактировал свой ответ проверенным ответом.
tcooc
Я не совсем уверен, что это правильно; поблекшие правила - те, которые я установил в своей собственной таблице стилей (например, font-size: 20px;)
Роб Соберс
1

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

user2528531
источник
0

введите описание изображения здесь

Новая версия Chrome Developer показывает, откуда он унаследован.

jmojico
источник
0

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

davidreedernst
источник