/ / dowiedz się, która klasa wpływa na dany element - css, firefox, firebug, google-chrome-devtools

dowiedzieć się, która klasa wpływa na dany element - css, firefox, firebug, google-chrome-devtools

Czy istnieje sposób, aby zobaczyć, która dokładnie deklaracjawpływa na element. Zamiast patrzenia na milion właściwości w inspektorze Firebug, to w zależności od tego, ile klas jest przypisanych, może zawierać wiele deklaracji, które mają niższy priorytet i dlatego nie są stosowane. Może się wydłużyć, aby stwierdzić, która konkretna deklaracja ma wpływ na Twój żywioł. Widzę długie ignorowane deklaracje takie jak to:

ul {
Zielony kolor;
}
"Styl obliczeniowy" pokaże wynik końcowy wszystkich hierarchii, ale nie od tego, skąd pochodzi styl. Może brakuje mi czegoś prostego. Wielkie dzięki!

JSBIN

Edytować: "Słyszałem, że powinienem móc rozszerzać atrybuty w metodzie Computed, jednak nie widzę, gdzie ta opcja jest dostępna. Widzę, że rozmiar czcionki wynosi 13,333px, ale nie ma opcji, aby zobaczyć, skąd się to bierze.

karta obliczeniowa

Odpowiedzi:

2 dla odpowiedzi № 1

Tak, w Firebug wybierz element, a następnie kliknijna karcie "Obliczone" (podczas wyświetlania ramki HTML). Tutaj zobaczysz listę właściwości CSS, które można rozwinąć, aby pokazać położenie odpowiedniego CSS.


0 dla odpowiedzi nr 2

The Obliczono panel boczny mogę podać te informacje.

Zwróć uwagę, że pokazuje on tylko ślad CSS - tzn. style, które wpływają na określoną właściwość CSS - dla tych właściwości, które są faktycznie zmienione przez reguły CSS twojego arkusza stylów. Chociaż może wyświetlać wszystkie obliczone wartości dla elementu. Aby ukryć niezmienione, możesz odznaczyć opcję Pokaż CSS agenta użytkownika.

Upewnij się też, że masz prądwersja Firefoksa zainstalowana (obecna stabilna to 20.0.1). Firebug korzysta wewnętrznie z niektórych interfejsów API do śledzenia stylu, które są dostępne tylko w nowszych wersjach Firefoksa.


0 dla odpowiedzi № 3

W Chrome DevTools znajduje się panel "styl obliczeniowy", który pokazuje listę stylów dla właściwości elementu i ich lokalizacji. Na przykład zobacz zrzut ekranu dla właściwości text-decoration.

zrzut ekranu