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
- Dies ist eine Standardregel / -eigenschaft, die der Browser anwendet, einschließlich standardmäßiger Kurzhand-Eigenschaften.
- 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
Live-Beispiel: Untersuchen Sie das Element mit dem Text "Hallo Welt!"
quelle
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: blue
ausgegraut? Weil es Teil eines Regelsatzes ist, der mindestens einen Stil hat, der vererbbar ist. Dieser vererbbare Stil isttext-indent: 1em
background-color:blue
ist nicht vererbbar, aber es ist Teil des Regelsatzes,text-indent: 1em
der 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.quelle
div
s und auszuwählenp
. Sie werden sehen, dassbackground-color
das nicht ausgegraut istdiv#two
. Aberbackground-color
ausgegraut ist fürdiv#three
undp
.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.
quelle
Dies bedeutet, dass die Regel durch eine andere Regel mit höherer Priorität ersetzt wurde. Zum Beispiel Stylesheets mit:
Der Inspektor zeigt die Regel
color:red;
abgeblendet undcolor: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).
quelle
font-size: 20px;
)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.
quelle
Die neue Version von Chrome Developer zeigt, von wo es geerbt wird.
quelle
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.
quelle