Pourquoi certaines propriétés CSS sont-elles barrées dans Chrome DevTools ?

Propriétés CSS barrées dans les outils de développement de Chrome : découvrir la raison

Lors de l'inspection d'éléments HTML dans les outils de développement de Chrome, vous pouvez rencontrer des éléments barrés Propriétés CSS dans le volet "Styles". Ces propriétés barrées indiquent un comportement spécifique qui met en lumière le style de l'élément.

Signification des propriétés barrées

Les propriétés barrées signifient que le style sous-jacent a été initialement appliqué mais ensuite remplacé par un sélecteur plus spécifique, une règle plus locale ou une propriété ultérieure au sein de la même règle. Ce comportement se produit car les règles CSS sont appliquées par ordre de spécificité et de priorité.

Cas particuliers

En plus des raisons mentionnées ci-dessus, les propriétés barrées peuvent également indiquer le cas particuliers suivants :

• Styles commentés : Styles qui existent dans une règle de correspondance mais sont commentés.
• Styles désactivés manuellement : Styles qui ont été manuellement désactivés en les décochant dans les outils de développement Chrome.
• Erreurs de syntaxe : Styles contenant des erreurs de syntaxe, indiqués par une icône d'erreur à côté du texte barré .

Exemple

Considérons l'exemple suivant :

<code class="html"><div id="my-div"></div></code>

<code class="css">/* Initially, all divs have a white background. */
div {
  background-color: white;
}

/* However, this rule overrides the previous one for divs with id "my-div". */
#my-div {
  background-color: blue;
}</code>

Dans les outils de développement Chrome, inspecter le fichier "my-div " l'élément afficherait "couleur de fond : blanc" barré. Cela indique que la couleur d'arrière-plan blanche initiale a été remplacée par la couleur d'arrière-plan bleue suivante spécifiée pour les divs avec l'identifiant "my-div".

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!