communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Comment puis-je trouver la règle CSS spécifique remplaçant un style dans Chrome DevTools ?

Comment puis-je trouver la règle CSS spécifique remplaçant un style dans Chrome DevTools ?

DDD
Libérer： 2024-10-31 17:59:19
original
666 Les gens l'ont consulté

How Can I Find the Specific CSS Rule Overriding a Style in Chrome DevTools?

Dévoilement des règles CSS de remplacement dans les outils de développement Chrome

L'inspection des éléments Web dans les outils de développement Chrome révèle souvent des styles remplacés. Pourtant, localiser la règle responsable de ces remplacements peut s’avérer un peu intimidant. Cependant, n'ayez crainte, car Chrome fournit un mécanisme intelligent pour résoudre ce problème.

Dévoilement des règles de style prioritaires

Pour retracer les règles prioritaires, plongez dans le Style calculé de l'inspecteur d'éléments. Agrandissez la propriété de style spécifique qui vous intéresse. Voilà! Une liste de toutes les règles CSS applicables vous sera présentée, présentant le gagnant victorieux responsable de votre remplacement de style observé.

À titre d'exemple, explorons un élément avec une propriété "font-size" remplacée. Développer cette propriété dans le panneau Style calculé donnerait quelque chose comme ceci :

font-size: 16px;
   - overridden by <link href="style2.css" rel="stylesheet"> line 10
   - origin: <inline style>
Copier après la connexion
Cela nous indique que la valeur originale de "font-size" a été définie en ligne, mais que le remplacement provient de "style2.css" sur ligne 10. C'est aussi simple que ça !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn
Article précédent：Comment la taille de la police, la hauteur de la ligne et la hauteur réelle interagissent-elles pour déterminer la hauteur de l'élément en CSS ? Article suivant：Comment créer un Div « Coller » en haut de l'écran lors du défilement ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2170
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2321
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1956
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1833
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1882
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal