Comment identifier la règle CSS de remplacement dans Chrome DevTools ?

Identification de la règle CSS de remplacement avec Chrome DevTools

Lorsque vous utilisez les outils de développement de Chrome pour étudier le style CSS, vous pouvez rencontrer des situations dans lesquelles un style est marqué comme remplacé. Pour identifier la règle spécifique qui la remplace, procédez comme suit :

1. Ouvrez l'inspecteur d'éléments : Sélectionnez l'élément dont vous souhaitez inspecter le style. Faites un clic droit et sélectionnez « Inspecter l'élément » ou utilisez le raccourci clavier « Ctrl Maj C ».
2. Localisez le panneau de style calculé : Dans le panneau de droite de l'inspecteur, cliquez sur l'onglet "Calculé".
3. Développez la propriété : Identifiez la propriété CSS qui est remplacée. Cliquez sur la flèche à côté du nom de la propriété pour la développer.
4. Consultez les règles applicables : La propriété développée affichera une liste de toutes les règles CSS qui s'appliquent à l'élément, y compris les règles remplacées. règle.
5. Identifier la règle gagnante : La règle qui a actuellement le plus de spécificité (basée sur la cascade CSS) sera mise en évidence et marquée comme la règle "gagnante".

Exemple :

Si une propriété CSS "color" est remplacée, vous verrez une liste de toutes les règles qui définissent la propriété "color" pour l'élément. La règle « gagnante », qui a la plus grande spécificité, sera marquée par une police plus grasse et une coche vert foncé.

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!