savoir quelle classe affecte un élément particulier - css, firefox, firebug, google-chrome-devtools

Y at-il un moyen de voir exactement quelle déclarationaffecte un élément. Plutôt que de regarder un million de propriétés dans l'inspecteur Firebug, où, en fonction du nombre de classes, une tâche affectée peut contenir un grand nombre de déclarations de priorité inférieure et, par conséquent, non appliquées. Il peut être long de trouver quelle déclaration particulière affecte réellement votre élément. Je vois des déclarations longtemps ignorées comme ceci:

ul {
la couleur verte;
}
"Style calculé" vous montrera le résultat final de toutes les hiérarchies, mais pas la provenance du style. Peut-être me manque quelque chose de simple. Merci beaucoup!

JSBIN

Modifier: J'ai entendu dire que je devrais pouvoir développer les attributs dans la balise Calculée, mais je ne vois pas où cette option est disponible. Je peux voir que la taille de la police est de 13.333px, mais aucune option pour voir d’où elle vient.

Réponses:

Oui, dans Firebug, sélectionnez l’élément puis cliquez sursur l'onglet "Calculé" (lors de l'affichage du cadre HTML). Ici, vous verrez une liste de propriétés CSS pouvant être développées pour afficher l'emplacement du CSS correspondant.

le Calculé panneau latéral peut vous donner cette information.

Notez qu’il n’affiche que la trace CSS - c.-à-d. les styles qui affectent une propriété CSS spécifique - pour ces propriétés, qui sont réellement modifiées par les règles CSS de votre feuille de style. Bien qu'il puisse afficher toutes les valeurs calculées pour un élément. Pour masquer les inchangés, vous pouvez décocher l'option Afficher le CSS de l'agent utilisateur.

Aussi, s'il vous plaît assurez-vous que vous avez un courantversion de Firefox installée (la version actuelle est 20.0.1). Firebug utilise en interne certaines API pour le traçage de style, qui ne sont disponibles que sur les versions les plus récentes de Firefox.

Dans Chrome DevTools, le panneau "style calculé" affiche la liste des styles d'une propriété d'élément et leurs emplacements. Par exemple, voir la capture d'écran pour la propriété text-decoration.