Was bedeutet es, wenn eine CSS-Regel im Elementinspektor von Chrome abgeblendet ist?

Ich h2überprüfe ein Element auf einer Webseite mit dem Elementinspektor von Google Chrome, und einige der CSS-Regeln, die anscheinend angewendet werden, sind ausgegraut. Es scheint, dass ein Durchstreichen anzeigt, dass eine Regel überschrieben wurde, aber was bedeutet es, wenn ein Stil ausgegraut ist?

Für mich haben die aktuellen Antworten das Problem nicht vollständig genug erklärt, daher füge ich diese Antwort hinzu, die hoffentlich für andere nützlich sein könnte.

Grau hinterlegt / heraus Text gedimmt, kann bedeuten , entweder

1. Dies ist eine Standardregel / -eigenschaft, die der Browser anwendet, einschließlich standardmäßiger Kurzhand-Eigenschaften.
2. Es handelt sich um eine etwas kompliziertere Vererbung.

Erbe

Hinweis: Im Bereich "Stil" der Chrome Dev Tools wird ein Regelsatz angezeigt, da eine oder mehrere Regeln aus dem Satz auf den aktuell ausgewählten DOM-Knoten angewendet werden. Der Vollständigkeit halber zeigen die Entwicklungswerkzeuge alle Regeln aus diesem Satz an, unabhängig davon, ob sie angewendet werden oder nicht.

In dem Fall, in dem eine Regel aufgrund der Vererbung auf das aktuell ausgewählte Element angewendet wird (dh die Regel wurde auf einen Vorfahren angewendet und das ausgewählte Element hat sie geerbt), zeigt Chrome erneut den gesamten Regelsatz an.

Die Regeln, die auf das aktuell ausgewählte Element angewendet werden, werden im normalen Text angezeigt.

Wenn eine Regel in diesem Satz vorhanden ist, aber nicht angewendet wird, weil es sich um eine nicht vererbbare Eigenschaft handelt (z. B. Hintergrundfarbe), wird sie als grauer / abgeblendeter Text angezeigt.

Hier ist ein Artikel, der eine gute Erklärung gibt - (Hinweis: Der relevante Artikel befindet sich am Ende des Artikels - Abbildung 21 - der relevante Abschnitt hat leider keine Überschrift) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Auszug aus dem Artikel

Dieses [Vererbungsszenario] kann gelegentlich zu Verwirrung führen, da standardmäßige Short-Hand-Eigenschaften verwendet werden. Abbildung 21 zeigt die voreingestellten Short-Hand-Eigenschaften der Schriftart-Eigenschaft zusammen mit den nicht vererbten Eigenschaften. Achten Sie nur auf den Kontext, den Sie bei der Untersuchung von Elementen betrachten.

Dies bedeutet, dass die Regel geerbt wurde, aber nicht auf das ausgewählte Element anwendbar ist:

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

Der Bereich enthält nur Eigenschaften aus Regeln, die direkt auf das ausgewählte Element anwendbar sind. Aktivieren Sie das Kontrollkästchen Geerbte Eigenschaften anzeigen, um zusätzlich geerbte Eigenschaften anzuzeigen. Solche Eigenschaften werden in einer abgeblendeten Schrift angezeigt.

Live-Beispiel: Untersuchen Sie das Element mit dem Text "Hallo Welt!"

div { 
  margin: 0;
}

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

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

Michael Coleman hat die richtige Antwort. Ich möchte nur ein einfaches Bild hinzufügen, das dazu passt. Der Link, den er aufgenommen hat, hat dieses einfache Beispiel: http://commandlinefanatic.com/art033ex4.html

Das HTML / DOM sieht so aus ...

Das Stilfenster in Chrome sieht folgendermaßen aus, wenn Sie das p-Element auswählen ...

Wie Sie sehen können, erbt das p-Element von seinen Vorfahren (den divs). Warum ist der Stil background-color: blueausgegraut? Weil es Teil eines Regelsatzes ist, der mindestens einen Stil hat, der vererbbar ist. Dieser vererbbare Stil isttext-indent: 1em

background-color:blueist nicht vererbbar, aber es ist Teil des Regelsatzes, text-indent: 1emder vererbbar ist, und die Entwickler von Chrome wollten beim Anzeigen von Regelsätzen vollständig sein. Um jedoch zwischen Stilen im Regelsatz zu unterscheiden, die vererbbar sind, und Stilen, die nicht vererbbar sind, sind die Stile, die nicht vererbbar sind, abgeblendet.

Dies tritt auch auf, wenn Sie über den Inspektor einen Stil hinzufügen, dieser neue Stil jedoch nicht für das ausgewählte Element gilt. Normalerweise sind die angezeigten Stile nur die für das ausgewählte Element. Das Grau zeigt also an, dass der gerade hinzugefügte Stil nicht das Element auswählt, dessen Fokus im DOM-Navigator liegt.

Dies bedeutet, dass die Regel durch eine andere Regel mit höherer Priorität ersetzt wurde. Zum Beispiel Stylesheets mit:

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

Der Inspektor zeigt die Regel color:red;abgeblendet und color:blue;normal an.

Informieren Sie sich über die CSS-Vererbung , um zu erfahren, welche Regeln vererbt werden / höhere Priorität haben.

BEARBEITEN:

Verwechslung: Die abgeblendeten Regeln sind die nicht festgelegten Regeln, die ein spezielles Standard-Stylesheet verwenden, das auf alle Elemente angewendet wird (die Regeln, die das Element renderbar machen, da alle Stile einen Wert haben müssen).

Bei Verwendung von Webpack werden alle CSS-Regeln oder -Eigenschaften, die im Quellcode geändert wurden, abgeblendet, wenn die Seite nach einer Neuerstellung neu geladen wird. Das ist wirklich ärgerlich und hat mich gezwungen, die Seite jedes Mal neu zu laden.

Die neue Version von Chrome Developer zeigt, von wo es geerbt wird.

Ich antworte lange nachdem die Frage bereits viele richtige Antworten hat, weil ich auf einen anderen Fall gestoßen bin, bei dem ein CSS-Codeblock in Chome DevTools ausgegraut und nicht bearbeitbar war: Der betreffende Block enthielt U + 200B ZERO WIDTH SPACE-Zeichen . Sobald ich diese gefunden und entfernt hatte, konnte ich den Block in Chrome DevTools erneut bearbeiten. Vermutlich könnte dies auch bei anderen Nicht-ASCII-Charakteren passieren, ich habe nicht versucht, das herauszufinden.