Що це означає, коли правило CSS в інспекторі елементів Chrome переходить у сірий колір?

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

Для мене нинішні відповіді не пояснили це питання досить повно, тому я додаю цю відповідь, яка, сподіваюся, може бути корисною для інших.

Сірий / затемнений текст, може означати будь-яке

1. це правило / властивість за замовчуванням, яке застосовується у веб-переглядачі, що включає властивості, що не мають дефолту, з короткою рукою.
2. Він передбачає спадкування, яке трохи складніше.

Спадщина

Примітка: на панелі "стиль" інструментів для розробників Chrome відображатиметься набір правил, оскільки одне або більше правил із набору застосовуються до обраного на сьогодні вузла DOM Я думаю, для повноти інструменти розробників показують усі правила з цього набору, застосовуються вони чи ні.

У випадку, коли правило застосовується до обраного в даний час елемента внаслідок спадкування (тобто правило було застосовано до предка, і вибраний елемент успадкував його), хром знову відобразить весь набір правил.

Правила, застосовані до обраного на даний момент елемента, відображаються у звичайному тексті.

Якщо в цьому наборі є правило, але воно не застосовується, оскільки воно є не спадковим властивістю (наприклад, колір тла), воно буде відображатися як сірий / затемнений текст.

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

Витяг із статті

Цей [сценарій успадкування] може час від часу створювати деяку плутанину, оскільки властивості, що не мають дефолту, мають коротке значення; малюнок 21 ілюструє дефолтовані властивості шрифту короткої руки поряд з не успадкованими властивостями. Просто пам’ятайте про контекст, який ви дивитесь під час вивчення елементів.

Це означає, що правило було успадковано, але не застосовується до вибраного елемента:

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

Панель містить лише властивості з правил, які безпосередньо застосовуються до обраного елемента. Щоб додатково відобразити успадковані властивості, увімкніть прапорець Показати успадковані властивості. Такі властивості відображатимуться у тьмяному шрифті.

Живий приклад: огляньте елемент, що містить текст "Привіт, світ!"

div { 
  margin: 0;
}

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

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

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

HTML / DOM виглядає приблизно так ...

Панель стилів у Chrome виглядає так, коли вибираєте елемент p ...

Як бачимо, елемент p успадковує від своїх предків (діви). Так чому ж стиль стилем 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, щоб дізнатися, які правила успадковуються / мають більший пріоритет.

Редагувати:

Змішання: сірі правила - це незареєстровані правила, в яких використовується спеціальна таблиця стилів за замовчуванням, яка застосовується до всіх елементів (правила, які роблять елемент відображуваним, оскільки всі стилі повинні мати значення).

Під час використання вебпакету будь-яке правило або властивість css, змінене у вихідному коді, залишається відтінком, коли сторінка перезавантажується після відновлення. Це справді дратує і змушує кожного разу перезавантажувати сторінку.

Нова версія розробника хрому показує, звідки він успадкований.

Я відповідаю задовго після того, як на запитання вже є багато правильних відповідей, тому що у Chome DevTools з'явився інший випадок, коли блок CSS-коду був сірим і непридатним: цей питання містив символи U + 200B ZERO WIDTH SPACE . Як тільки я знайшов їх і видалив, я міг знову відредагувати блок у Chrome DevTools. Імовірно, це може трапитися і з іншими персонажами, які не мають права, я не намагався це зрозуміти.