Wo finde ich die CSS-Regel für ein Element in Firebug?

Question

Ich gehe über Frontify und ich möchte ein Element in Firebug inspizieren. Das Element ist <div class="mod mod-header fixed open">.

Wenn dieses Element in Firebug Auswahl HTML Panel, in der Regel erwarten, dass Sie die Stile in der Stile Seitenwand zu sehen. Ich sehe .mod-header dort aufgeführt aber nicht .fixed oder .open. Ich möchte sehen, was diese Klassen tun. Warum kann ich sie nicht sehen?

EDIT: Sie müssen nach unten scrollen oder klicken Sie auf das Menü, um diese Klassen zu sehen.

Answer 1

.fixed wird verwendet, was ich als Scoping Selektor bezeichnen würde. Ein Scoping selector kann eigene Stile haben, aber es wird auch verwendet, um zu steuern, wo er und verwandte CSS-Selektoren andere Elemente beeinflussen können. Häufig werden Module/Komponenten diesen Ansatz verwenden. Wenn Sie sich das erste untergeordnete Element von <div class="mod mod-header fixed"> ansehen, sehen Sie <div class="row header">. Wählen Sie dieses Element in Ihrem Inspektor aus. Sie werden jetzt bemerken, wie .fixed verwendet wird. Im Inspektorfenster wird der folgende CSS-Selektor angezeigt.

.mod-header.fixed .header { 
    z-index: 10; 
    padding: 15px 0; 
    max-width: 100%; 
    box-shadow: 0 1px 5px rgba(0,0,0,.1); 
} 

So .fixed und .open werden eingesetzt, untergeordnete Elemente zu steuern, anstatt das Element, das sie sind aufgebracht.

Es kann oft einfacher sein, dem äußersten Element eine einzelne Klasse hinzuzufügen und Ihre CSS-Selektoren entsprechend anzupassen, um untergeordnete Elemente neu zu stylen, anstatt eine Handvoll Elemente zu finden und jeweils eine Klasse anzuwenden.