Come usare Firebug per trovare facilmente quale file css definisce uno stile particolare

Question

Forse sono solo un novizio di Firebug, o forse c'è qualche altro strumento migliore? Ma sto cercando di trovare facilmente quale dei vari file css collegati, definisce lo stile di un elemento specifico.

Ad esempio in un ambiente di produzione posso individuare che uno stile denominato tab di sinistra viene applicato a un elemento specifico e viene visualizzato correttamente. Nell'ambiente di sviluppo lo stesso stile è applicato all'interno dell'HTML, ma non viene reso allo stesso modo della produzione.

Gli ambienti di produzione e sviluppo includono ciascuno 9 file CSS. Voglio trovare facilmente quale definisce lo stile left-tab. Usando la scheda CSS posso aprire e persino (temporaneamente) modificare ognuno di questi, ma come faccio a cercare tra questi? Ctrl-F cerca il documento HTML stesso, a differenza del CSS contenuto nel pannello Firebug.

Answer 1

Attivare la scheda dello stile nel pannello di destra "Stile | Computed | Layout | DOM". Per ogni regola CSS, ci sarà un collegamento blu "mystyles.css (riga 22) .Puoi saltare rapidamente a una regola attivando Elemento Ispettore (la casella con il mouse sull'estrema sinistra, tasto di scelta rapida è Ctrl + Maiusc +C. Evidenziando sopra il vostro elemento con elemento Impostazioni (si può anche fare clic su di esso) vi mostrerà tutte le regole CSS che si applicano (o sono stati sovrascritti).

Answer 2

Quando si fa clic con il pulsante destro del mouse su un elemento e si fa clic su 'inspect element', la casella in basso a destra visualizza gli stili CSS per quell'elemento, appena sopra ciascuno di essi indica quale file CSS proviene e quale riga.