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

249

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?

Rob Sobers
źródło

Odpowiedzi:

96

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.

Michael Coleman
źródło
10
Stwierdzenie „reguły, które są dziedziczone, ale nie są stosowane , będą wyświetlane jako tekst w kolorze szarym / przyciemnionym” jest nieprawdziwe. Jeśli nie zostaną zastosowane, zostaną przekreślone. Zaktualizowałem swoją odpowiedź za pomocą zrzutu ekranu i przykładu na żywo.
Rob Sobers
10
To właściwa odpowiedź !!! Kluczowe zdanie brzmi ... „Jeśli reguła istnieje w tym zestawie, ale nie jest stosowana, ponieważ jest to właściwość nie do dziedziczenia (np. Kolor tła), pojawi się jako szary / przyciemniony tekst”.
Niko Bellic
To zdecydowanie właściwa odpowiedź. Jeśli wyszarzona właściwość pojawia się w sekcji z napisem „Dziedziczone z [selektora]”, oznacza to, że właściwość nie jest dziedziczna i nie jest stosowana do bieżącego elementu. Każda przekreślona właściwość została zastąpiona bardziej szczegółowym stylem.
brak
1
Jeśli reguły są wyszarzone, gdy nie są dziedziczone, to dlaczego mój element div ma wyszarzone reguły „szerokości”? Czy szerokość nie jest dziedziczna? Nawiasem mówiąc, pytam o to poważnie.
moosefetcher
1
... Jeśli więc widzisz Chrome wyszarzający reguły css, które są bardzo stosowane - w których możesz je odznaczyć (lub zmienić ich wartości) i zobaczyć odpowiednią zmianę na stronie - być może reguła wpływa na element ale nie jest stosowany w szczególności do tego elementu, ale do elementu nadrzędnego.
Ben Wheeler,
82

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ą.

wyszarzone reguły są dziedziczone od przodków

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>

Rob Sobers
źródło
13
@Rob Mówiąc dokładniej, gdy styl jest zaznaczony na szaro, oznacza to, że został odziedziczony z innego elementu obejmującego, ale nie ma zastosowania do wybranego elementu . Z dokumentacji: „Panel zawiera tylko właściwości reguł, które mają bezpośrednie zastosowanie 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ą”.
drkvogel
2
@RobSobers Niestety, nie sądzę, że twój przykład pokazuje dziedziczenie. Gdzie jest przodek, z którego dziedziczy div? Jeśli przewiniesz w dół w okienku Styels w Chrome, zobaczysz sekcje zatytułowane „Dziedziczone z…” Co oznaczają wyszarzone reguły? Czy możesz to uwzględnić w przykładzie?
Niko Bellic,
8
Nie rozumiem, dlaczego ta odpowiedź jest. oznaczone jako najlepsza odpowiedź ib. ma tak wiele pozytywnych opinii. To oczywiście źle. Marginesy nie są dziedziczonymi właściwościami ( stackoverflow.com/a/5612360/24267 ) Odpowiedź Michaela Colemana jest poprawna. Och, nie masz na myśli dziedziczonego od elementu przodka, masz na myśli ... Nie jestem pewien, co dokładnie masz na myśli. W każdym razie ta odpowiedź jest niepoprawna w 2015 r. W przypadku Chrome 46.
mhenry1384
3
Wyraźnie oddano głosy za magię MS Paint ze strzałkami i efekt cienia bąbelkowego. uznany za niepoprawny.
David
2
@ mhenry1384 „a” można łatwo wyjaśnić: ponieważ jest napisany przez osobę, która zadała pytanie.
Andrew Grimm,
27

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 ...

HTML

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

Panel stylów

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.

Niko Bellic
źródło
1
To najlepsza odpowiedź, ponieważ daje proste demo. Otwórz ten adres URL w nowej karcie i użyj Narzędzi Chrome dla programistów, aby wybrać różne divs i p. Zobaczysz, że background-colornie jest wyszarzony div#two. Ale background-colorjest wyszarzony dla div#threei p.
wisbucky
świetne wyjaśnienie
Dirk Boer,
10

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.

AaronLS
źródło
To był mój problem. Dzięki!
Chuck Le Butt,
5

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ść).

tcooc
źródło
Właśnie to przetestowałem i myślę, że to nieprawda. W przypadku zastąpienia reguły nastąpi przekreślenie (jak wskazuje moje pytanie). Zobacz: yfrog.com/f/j3fooep
Rob Sobers
@Rob: miał błąd, ponieważ devtools nie zaczynały się. Uruchomiłem go i zredagowałem swoją odpowiedź za pomocą mojej przetestowanej odpowiedzi.
tcooc
Nie jestem do końca pewien, czy to prawda; wyblakłe reguły to te, które ustawiłem w swoim własnym arkuszu stylów (np. font-size: 20px;)
Rob Sobers,
1

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.

użytkownik2528531
źródło
0

wprowadź opis zdjęcia tutaj

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

jmojico
źródło
0

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źć.

davidreedernst
źródło