Narzędzia dla programistów Chrome: jak dowiedzieć się, co zastępuje regułę CSS?

196

Cóż, to całkiem proste. Jeśli Narzędzia programistyczne Chrome pokazują mi, że styl jest nadpisany, to jak sprawdzić, która reguła CSS go zastępuje?

Chcę wiedzieć, czy istnieje coś takiego jak „Pokaż, co to przesłania” .

OBS: Proszę, nie kieruj mnie do Firebuga.

— Ramon K.
źródło

Narzędzia programistyczne Chrome również pokazują nadrzędną zasadę

— Zoltan Toth,

Odpowiedzi:

283

Użyj panelu Styl obliczony w Inspektorze elementów. Rozwiń właściwość będącą przedmiotem zainteresowania, aby wyświetlić listę obowiązujących reguł, które wygrały.

Zrzut ekranu Chrome

— josh3736
źródło

Dla mnie obliczona karta była domyślnie otwarta i dlatego nie była wymieniona jako karta, powinna mieć nagłówek „Obliczony”, w przeciwnym razie możesz długo szukać.

— MrFox,

Technika zmieniła się nieco w miarę postępu Chrome. Zamiast „Rozwiń interesującą właściwość” kliknij wziernik obok właściwości, aby pokazać, który styl powrócił na karcie Style.

— intotecho

@intotecho: Chrome 47 przywrócił rozwinięcie w zakładce Obliczone od momentu zasysania zmiany lupy. crbug.com/496263

— josh3736

co jeśli WSZYSTKIE z nich zostaną anulowane? Prawdopodobnie z powodu skryptu? Jak dowiesz się, kto to zrobił?

— darkgaze

Nadal jest tam jako karta „Obliczone” w panelu Elementy.

— josh3736,

Możesz po prostu spojrzeć na te o tej samej nazwie, które nie są przekreślone, pamiętaj, że lista jest ważna.

Lub możesz wyświetlić obliczone style. Będą to faktycznie zastosowane style.

— użytkownik1902091
źródło

crtrl + shift + c i sprawdź element. Następnie znajdź styl bez linii w nim w polu w prawym dolnym rogu.

przesłonięcie jest w większości przypadków na górze (i bez linii przez nią, ponieważ ten styl jest „zwycięski”).

— Peter Rasmussen
źródło

Nie jest tak, gdy styl jest oznaczony jako! Ważny

— JCorriveau