Qu'est-ce que cela signifie lorsqu'une règle CSS est grisée dans l'inspecteur d'éléments de Chrome?

J'inspecte un h2élément sur une page Web à l'aide de l'inspecteur d'élément de Google Chrome et certaines des règles CSS - qui semblent être appliquées - sont grisées. Il semble qu'une barre barrée indique qu'une règle a été remplacée, mais qu'est-ce que cela signifie lorsqu'un style est grisé?

Pour moi, les réponses actuelles n'expliquent pas suffisamment le problème, donc j'ajoute cette réponse qui, espérons-le, pourrait être utile à d'autres.

Texte grisé / grisé, peut signifier soit

1. c'est une règle / propriété par défaut que le navigateur applique, qui inclut des propriétés abrégées par défaut.
2. Cela implique un héritage qui est un peu plus compliqué.

Héritage

Remarque: le panneau "style" des outils de développement Chrome affiche un ensemble de règles, car une ou plusieurs règles de l'ensemble sont appliquées au nœud DOM actuellement sélectionné. Je suppose que, par souci d'exhaustivité, les outils de développement affichent toutes les règles de cet ensemble, qu'elles soient appliquées ou non.

Dans le cas où une règle est appliquée à l'élément actuellement sélectionné en raison de l'héritage (c'est-à-dire que la règle a été appliquée à un ancêtre et que l'élément sélectionné en a hérité), Chrome affichera à nouveau l'ensemble des règles.

Les règles qui sont appliquées à l'élément actuellement sélectionné apparaissent en texte normal.

Si une règle existe dans cet ensemble mais n'est pas appliquée car il s'agit d'une propriété non héritable (par exemple la couleur d'arrière-plan), elle apparaîtra sous forme de texte grisé / grisé.

voici un article qui donne une bonne explication - (Remarque: l'élément pertinent est au bas de l'article - figure 21 - malheureusement la section pertinente n'a pas de titre) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Extrait de l'article

Ce [scénario d'héritage] peut parfois créer un peu de confusion, car les propriétés abrégées par défaut; la figure 21 illustre les propriétés abrégées par défaut de la propriété font ainsi que les propriétés non héritées. Soyez simplement conscient du contexte que vous regardez lorsque vous examinez des éléments.

Cela signifie que la règle a été héritée, mais n'est pas applicable à l'élément sélectionné:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

Le volet contient uniquement les propriétés des règles qui sont directement applicables à l'élément sélectionné. Afin d'afficher en plus les propriétés héritées, cochez la case Afficher hérité. Ces propriétés seront affichées dans une police grisée.

Exemple en direct: inspectez l'élément contenant le texte "Hello, world!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

Michael Coleman a la bonne réponse. Je veux juste ajouter une image simple pour l'accompagner. Le lien qu'il a inclus a cet exemple simple: http://commandlinefanatic.com/art033ex4.html

Le HTML / DOM ressemble à ceci ...

Le volet des styles dans Chrome ressemble à ceci lorsque vous sélectionnez l'élément p ...

Comme vous pouvez le voir, l'élément p hérite de ses ancêtres (les divs). Alors pourquoi le style est-il background-color: bluegrisé? Parce que cela fait partie d'un ensemble de règles qui a au moins un style héritable. Ce style héréditaire esttext-indent: 1em

background-color:bluen'est pas héritable, mais il fait partie de l'ensemble de règles qui contient text-indent: 1emqui est héritable et les développeurs de Chrome voulaient être complets lors de l'affichage des ensembles de règles. Cependant, pour distinguer les styles du jeu de règles qui sont héritables des styles qui ne le sont pas, les styles qui ne peuvent pas être hérités sont grisés.

Cela se produit également si vous ajoutez un style via l'inspecteur, mais ce nouveau style ne s'applique pas à l'élément que vous avez sélectionné. Habituellement, les styles affichés ne sont que ceux de l'élément sélectionné, donc le gris indique que le style que vous venez d'ajouter ne sélectionne pas l'élément qui a le focus dans le navigateur DOM.

Cela signifie que la règle a été remplacée par une autre règle de priorité plus élevée. Par exemple, des feuilles de style avec:

h2 {
  color: red;
}
h2 {
  color: blue;
}

L'inspecteur montrera la règle color:red;grisés et color:blue;normalement.

Lisez sur l' héritage CSS pour savoir quelles règles sont héritées / ont une priorité plus élevée.

ÉDITER:

Mixup: les règles grisées sont les règles non définies, qui utilisent une feuille de style par défaut spéciale qui est appliquée à tous les éléments (les règles qui rendent l'élément rendu, car tous les styles doivent avoir une valeur).

Lors de l'utilisation de webpack, toute règle ou propriété css qui a été modifiée dans le code source est grisée lorsque la page se recharge après une reconstruction. C'est vraiment ennuyeux et m'a forcé à recharger la page à chaque fois.

La nouvelle version du développeur Chrome montre d'où il est hérité.

Je réponds longtemps après que la question a déjà de nombreuses réponses correctes car j'ai rencontré un cas différent d'avoir un bloc de code CSS grisé et non modifiable dans Chome DevTools: Le bloc en question contenait des caractères U + 200B ZERO WIDTH SPACE . Une fois que je les ai trouvés et supprimés, je pouvais à nouveau modifier le bloc dans Chrome DevTools. Vraisemblablement, cela pourrait se produire avec d'autres personnages non-ascii, je n'ai pas essayé de le comprendre.