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

248

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?

Rob Sobers
quelle

Antworten:

95

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.

Michael Coleman
quelle
10
Die Aussage "Regeln, die geerbt, aber nicht angewendet werden , werden als grauer / abgeblendeter Text angezeigt" ist falsch. Wenn sie nicht angewendet werden, werden sie durchgestrichen. Ich habe meine Antwort mit einem Screenshot und einem Live-Beispiel aktualisiert.
Rob Sobers
10
Das ist die richtige Antwort !!! Der Schlüsselsatz lautet ... "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."
Niko Bellic
Dies ist definitiv die richtige Antwort. Wenn eine ausgegraute Eigenschaft in einem Abschnitt mit der Aufschrift "Von [Selektor] geerbt" angezeigt wird, handelt es sich um eine nicht vererbbare Eigenschaft, die nicht auf das aktuelle Element angewendet wird. Jede durchgestrichene Eigenschaft wurde durch einen spezifischeren Stil überschrieben.
Nur
1
Wenn Regeln ausgegraut sind, wenn sie nicht vererbbar sind, warum hat mein div-Element die 'width'-Regeln ausgegraut? Ist die Breite nicht vererbbar? Ich frage das übrigens ernsthaft.
Elchfetcher
1
... Also , wenn Sie sehen , Chrome CSS - Regeln Vergrauung aus , die sehr viel Wesen sind angewendet - wo man sie deaktivieren können (oder ihre Werte ändern) und eine entsprechende Änderung auf der Seite sehen - es kann sein , dass die Regel wirkt sich das Element wird jedoch nicht speziell auf dieses Element angewendet , sondern auf ein übergeordnetes Element.
Ben Wheeler
82

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.

ausgegraute Regeln werden von Vorfahren geerbt

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>

Rob Sobers
quelle
13
@Rob Um genau zu sein, bedeutet ein ausgegrauter Stil, dass er von einem anderen umfassenden Element geerbt wurde, aber nicht auf das ausgewählte Element anwendbar ist . Aus der Dokumentation: "Der Bereich enthält nur Eigenschaften aus Regeln, die direkt auf das ausgewählte Element anwendbar sind. Um geerbte Eigenschaften zusätzlich anzuzeigen, aktivieren Sie das Kontrollkästchen Geerbte Eigenschaften anzeigen. Solche Eigenschaften werden in einer abgeblendeten Schriftart angezeigt."
Drkvogel
2
@RobSobers Leider glaube ich nicht, dass Ihr Beispiel Vererbung zeigt. Wo ist der Ahnenelternteil, von dem der Div erbt? Wenn Sie in Chrome im Bereich "Stile" nach unten scrollen, werden Abschnitte mit dem Titel "Geerbt von ..." angezeigt. Was bedeuten die ausgegrauten Regeln dort? Können Sie das in ein Beispiel aufnehmen?
Niko Bellic
8
Ich verstehe nicht, warum diese Antwort a ist. als beste Antwort markiert und b. hat so viele positive Stimmen. Es ist eindeutig falsch. Ränder sind keine vererbbaren Eigenschaften ( stackoverflow.com/a/5612360/24267 ). Die Antwort von Michael Coleman ist die richtige. Oh, du meinst nicht, von einem Ahnenelement geerbt zu sein, du meinst ... Ich bin mir nicht sicher, was du genau meinst. Auf jeden Fall ist diese Antwort im Jahr 2015 mit Chrome 46 nicht korrekt.
mhenry1384
3
Offensichtlich sind die Stimmen für etwas MS Paint-Magie mit den Pfeilen und diesem Blasenschatteneffekt. als falsch herabgestuft.
David
2
@ mhenry1384 "a" ist leicht zu erklären: weil es von der Person geschrieben wurde, die die Frage gestellt hat.
Andrew Grimm
27

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 ...

HTML

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

Stilbereich

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.

Niko Bellic
quelle
1
Dies ist die beste Antwort, da es eine einfache Demo gibt. Öffnen Sie diese URL in einem neuen Tab und verwenden Sie die Chrome Developer Tools, um die verschiedenen divs und auszuwählen p. Sie werden sehen, dass background-colordas nicht ausgegraut ist div#two. Aber background-colorausgegraut ist für div#threeund p.
wisbucky
tolle Erklärung
Dirk Boer
10

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.

AaronLS
quelle
Das war mein Problem. Vielen Dank!
Chuck Le Butt
5

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).

tcooc
quelle
Ich habe das gerade getestet und finde das falsch. In dem Fall, in dem eine Regel überschrieben wird, gibt es einen Durchschlag (wie meine Frage zeigt). Siehe: yfrog.com/f/j3fooep
Rob Sobers
@Rob: hatte eine Verwechslung, da devtools nicht gestartet wurde. Ich habe es zum Laufen gebracht und meine Antwort mit meiner getesteten Antwort bearbeitet .
Tcooc
Ich bin mir auch nicht ganz sicher, ob das richtig ist. Die verblassten Regeln sind diejenigen, die ich in meinem eigenen Stylesheet festgelegt habe (z. B. font-size: 20px;)
Rob Sobers
1

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.

user2528531
quelle
0

Geben Sie hier die Bildbeschreibung ein

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

jmojico
quelle
0

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.

davidreedernst
quelle