Jak sprawdzić dlaczego styl css jest przekreślony w Google/Firefox developer tools

pytanie zadane 15 maja 2019 w HTML i CSS przez frederrer Użytkownik (740 p.)

Generalnie dość czesto się to pojawia chcąc np edytować domyślny szablon itp np:

W jaki sposób mogę się dowiedzieć jaki inny element stylu (lub szablon html) powoduje to że dany css jest przekreślony . Zawsze mnie to nurtowało i myślę że znacznie przyśpieszyło mi daną pracę gdybym od razu mógł znaleźć przyczynę problemu.

Dzięki za pomoc !

Obrazek jest może zły przykładem bo powód przekreślenia jest raczej widoczny. Mam na myśli szereg innych przekreśleń których przyczyn nie widać na pierwszy rzut oka

1 odpowiedź

odpowiedź 15 maja 2019 przez lateM Pasjonat (17,660 p.)

Powodem przekreślenia jest fakt, że jakiś inny styl ma większą ważność i to on aktualnie działa i 'przykrywa' ten przekreślony. W tym wypadku dzieje się tak, gdyż selektor klasy + id ma większą ważność niż sam selektor z id. Wpływ na to ma również miejsce w którym aplikujesz style więc: style inline > style w znaczniku <style> </style> w head > kolejność podpiętych plików css (jeśli jest kilka plików css podpiętych do strony to style z pliku podpiętego na końcu będą ważniejsze niż te wyżej) + dlatego najlepiej używać samych selektorów klasy i nie robić długich ciągów selektora.

Jeśli chcesz szybko przeszukiwać konsolę uwzględniając dany styl np. "width" to w Chrome powiększ sobie konsolę do jakiegoś dużego rozmiaru, wtedy pojawi Ci się obok zakładki "Styles" zakładka "Computed" i wtedy, kiedy klikniesz "width" pojawią Ci się zarówno wszystkie wystąpienia "width" jak i lista dokumentów ".css".