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
- 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.
- 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
Przykład na żywo: sprawdź element zawierający tekst „Witaj, świecie!”
źródło
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: blue
wyszarzony? Ponieważ jest to część zestawu reguł, który ma co najmniej jeden dziedziczny styl. Ten dziedziczny styl jesttext-indent: 1em
background-color:blue
nie jest dziedziczony, ale jest częścią zestawu reguł, który zawieratext-indent: 1em
dziedziczenie, 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.źródło
div
s ip
. Zobaczysz, żebackground-color
nie jest wyszarzonydiv#two
. Alebackground-color
jest wyszarzony dladiv#three
ip
.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.
źródło
Oznacza to, że reguła została zastąpiona inną regułą o wyższym priorytecie. Na przykład arkusze stylów z:
Inspektor pokaże
color:red;
szarą icolor: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ść).
źródło
font-size: 20px;
)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.
źródło
Nowa wersja programisty chrome pokazuje, skąd została odziedziczona.
źródło
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źć.
źródło