Co to znaczy, że reguła CSS jest wyszarzona w Inspektorze elementów Chrome?

Sprawdzam h2element na stronie za pomocą Inspektora elementów Google Chrome, a niektóre reguły CSS - które wydają się być stosowane - są wyszarzone. Wydaje się, że przekreślenie oznacza, że ​​reguła została zastąpiona, ale co to znaczy, gdy styl jest wyszarzony?

Dla mnie obecne odpowiedzi nie wyjaśniły problemu w pełni, więc dodaję tę odpowiedź, która, mam nadzieję, może być przydatna dla innych.

Tekst szary / przygaszony, może oznaczać albo

1. jest to domyślna reguła / właściwość stosowana przez przeglądarkę, która obejmuje domyślne właściwości skrótów.
2. Obejmuje dziedziczenie, które jest nieco bardziej skomplikowane.

Dziedzictwo

Uwaga: panel „stylu” narzędzi deweloperskich Chrome wyświetli zestaw reguł, ponieważ jedna lub więcej reguł z zestawu jest stosowanych do aktualnie wybranego węzła DOM. Myślę, że dla kompletności narzędzia programistyczne pokazują wszystkie reguły z tego zestawu, niezależnie od tego, czy są one stosowane, czy nie.

W przypadku zastosowania reguły do ​​aktualnie wybranego elementu z powodu dziedziczenia (tj. Reguła została zastosowana do przodka, a wybrany element ją odziedziczył), chrom ponownie wyświetli cały zestaw reguł.

Reguły stosowane do aktualnie wybranego elementu pojawiają się w zwykłym tekście.

Jeśli reguła istnieje w tym zestawie, ale nie jest stosowana, ponieważ jest to właściwość, której nie można odziedziczyć (np. Kolor tła), pojawi się jako szary / przyciemniony tekst.

oto artykuł, który daje dobre wyjaśnienie - (Uwaga: odpowiedni artykuł znajduje się na dole artykułu - rysunek 21 - niestety odpowiedni rozdział nie ma nagłówka) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Fragment artykułu

Ten [scenariusz dziedziczenia] może czasami powodować pewne zamieszanie, ponieważ domyślne właściwości skrótów; rysunek 21 ilustruje domyślne właściwości krótkiej właściwości właściwości czcionki wraz z właściwościami niep dziedziczonymi. Pamiętaj tylko o kontekście, na który patrzysz podczas badania elementów.

Oznacza to, że reguła została odziedziczona, ale nie ma zastosowania do wybranego elementu:

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

Panel zawiera tylko właściwości z reguł, które są bezpośrednio stosowane do wybranego elementu. Aby dodatkowo wyświetlać odziedziczone właściwości, zaznacz pole wyboru Pokaż odziedziczone. Takie właściwości będą wyświetlane przyciemnioną czcionką.

Przykład na żywo: sprawdź element zawierający tekst „Witaj, świecie!”

div { 
  margin: 0;
}

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

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

Michael Coleman ma właściwą odpowiedź. Chcę tylko dodać prosty obraz, aby się z nim pogodzić. Link, który podał, zawiera ten prosty przykład: http://commandlinefanatic.com/art033ex4.html

HTML / DOM wygląda następująco ...

Panel stylów w Chrome wygląda tak po wybraniu elementu p ...

Jak widać, element p dziedziczy po przodkach (div). Dlaczego więc styl jest background-color: bluewyszarzony? Ponieważ jest to część zestawu reguł, który ma co najmniej jeden dziedziczny styl. Ten dziedziczny styl jesttext-indent: 1em

background-color:bluenie jest dziedziczony, ale jest częścią zestawu reguł, który zawiera text-indent: 1emdziedziczenie, a twórcy Chrome chcieli być kompletni podczas wyświetlania zestawów reguł. Aby jednak odróżnić style w zestawie reguł, które są dziedziczone od stylów, które nie są, style, które nie są dziedziczone, są wyszarzone.

Dzieje się tak również wtedy, gdy dodasz styl za pomocą inspektora, ale ten nowy styl nie dotyczy wybranego elementu. Zazwyczaj pokazywane są tylko style dla wybranego elementu, więc kolor szary wskazuje, że dodany styl nie wybiera elementu, który jest aktywny w nawigatorze DOM.

Oznacza to, że reguła została zastąpiona inną regułą o wyższym priorytecie. Na przykład arkusze stylów z:

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

Inspektor pokaże color:red;szarą i color:blue;normalną regułę .

Przeczytaj o dziedziczeniu CSS, aby dowiedzieć się, które reguły są dziedziczone / mają wyższy priorytet.

EDYTOWAĆ:

Mieszanie: wyszarzone reguły są nieuzbrojonymi regułami, które używają specjalnego domyślnego arkusza stylów, który jest stosowany do wszystkich elementów (reguły, które umożliwiają renderowanie elementu, ponieważ wszystkie style muszą mieć wartość).

Podczas korzystania z pakietu WWW każda reguła css lub właściwość, która została zmieniona w kodzie źródłowym, jest wyszarzona, gdy strona przeładowuje się po odbudowie. To jest naprawdę denerwujące i zmusiło mnie do ponownego ładowania strony za każdym razem.

Nowa wersja programisty chrome pokazuje, skąd została odziedziczona.

Odpowiadam długo po tym, jak pytanie ma już wiele poprawnych odpowiedzi, ponieważ napotkałem inny przypadek, w którym blok kodu CSS był wyszarzony i nieedytowalny w Chome DevTools: ten blok zawierał znaki U + 200B ZERO WIDTH SPACE . Po ich znalezieniu i usunięciu mogłem ponownie edytować blok w Chrome DevTools. Przypuszczalnie może się tak zdarzyć także w przypadku innych nie-ascii, nie próbowałem tego rozgryźć.