Où puis-je trouver la règle CSS liée à un élément dans Firebug?

Question

Je vais sur Frontify et je veux inspecter un élément dans Firebug. L'élément est <div class="mod mod-header fixed open">.

Lors de la sélection de cet élément dans le panneau HTML Firebug, vous attendent généralement de voir les styles dans le Styles panneau latéral. Je vois .mod-header énumérés là mais pas .fixed ou .open. Je veux voir ce que font ces classes. Pourquoi je ne peux pas les voir?

EDIT: Vous devez faire défiler vers le bas ou cliquer sur le menu pour voir ces classes.

Answer 1

.fixed est utilisé comme ce que j'appellerais un sélecteur. Un sélecteur peut avoir ses propres styles, mais il est également utilisé pour contrôler où il et les sélecteurs CSS peuvent affecter d'autres éléments. Vous verrez souvent des modules/composants utiliser cette approche. Si vous regardez le premier élément enfant de <div class="mod mod-header fixed">, <div class="row header">. Sélectionnez cet élément dans votre inspecteur. Vous remarquerez maintenant comment .fixed est utilisé. Vous verrez le sélecteur CSS suivant dans la fenêtre de l'inspecteur.

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

Alors .fixed et .open sont utilisés pour contrôler les éléments de l'enfant plutôt que l'élément qu'ils sont appliqués à.

Il est souvent plus facile d'ajouter une seule classe à l'élément le plus externe et de configurer vos sélecteurs CSS en conséquence pour redéfinir les éléments enfants au lieu de trouver une poignée d'éléments et d'appliquer une classe à chacun.