Strumenti per gli sviluppatori di Chrome: come scoprire cosa sta scavalcando una regola CSS?


196

Bene, questo è piuttosto semplice. Se gli Strumenti per sviluppatori di Chrome mi mostrano che uno stile è ignorato, come vedere quale regola CSS lo sta sovrascrivendo?

Voglio sapere se esiste qualcosa del tipo "Mostrami cosa ignora questo" .

OBS: Per favore, non indicarmi Firebug.


2
Gli Strumenti per sviluppatori di Chrome ti mostrano anche la regola principale
Zoltan Toth il

Risposte:


283

Utilizza il pannello Stile calcolato della finestra di ispezione degli elementi. Espandi la proprietà di interesse per visualizzare l'elenco delle regole applicabili e quale ha vinto.

Schermata di Chrome


Per me la scheda calcolata era aperta per impostazione predefinita e quindi non elencata come una scheda, avrebbe dovuto avere un'intestazione "Calcolata", altrimenti potresti cercare a lungo.
MrFox,

1
La tecnica è leggermente cambiata con l'avanzare di Chrome. Invece di 'Espandi la proprietà di interesse' fai clic sul cannocchiale accanto alla proprietà e mostrerà quale stile ha vinto nella scheda Stili.
intotecho,

3
@intotecho: Chrome 47 ha ripristinato l'espansione nella scheda Calcolato da quando è stata aspirata la modifica della lente di ingrandimento. crbug.com/496263
josh3736

cosa succede se TUTTI vengono cancellati? Probabilmente a causa di una sceneggiatura? Come scopri chi è stato?
darkgaze,

È ancora lì come la scheda "Calcolata" nel pannello Elementi.
josh3736,

7

Puoi semplicemente guardare quelli con lo stesso nome che non sono cancellati, ricordare che l'elenco è importante.

Oppure puoi visualizzare gli stili calcolati. Saranno gli stili effettivamente applicati.


2

crtrl + shift + c e ispeziona l'elemento. Quindi trova lo stile senza una linea attraverso di esso, nella casella nell'angolo in basso a destra.

l'override è nella maggior parte dei casi nella parte superiore (e senza una linea che lo attraversa, poiché questo stile è quello "vincente").


4
Non è il caso in cui uno stile sia contrassegnato come! Important
JCorriveau il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.