wake-up-neo.net

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

Ich überprüfe ein h2 -Element auf einer Webseite mit dem Elementinspektor von Google Chrome. Einige CSS-Regeln, die anscheinend angewendet werden, sind ausgegraut. Es scheint, dass ein durchgestrichener Text darauf hinweist, dass eine Regel außer Kraft gesetzt wurde, aber was bedeutet es, wenn ein Stil ausgegraut ist?

206
Rob Sobers

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

Grauer/ausgeblendeter Text kann entweder bedeuten

  1. dies ist eine Standardregel eigenschaft, die der Browser anwendet, einschließlich der Standardeigenschaften.
  2. Die Vererbung ist etwas komplizierter. 

Erbe

Hinweis: Das "Stil" - Bedienfeld von Chrome Dev Tools zeigt einen Regelsatz an, da eine oder mehrere Regeln aus dem Satz auf den aktuell ausgewählten DOM-Knoten angewendet werden .. _. Ich denke, der Vollständigkeit halber zeigen die Dev Tools alle Regeln aus diesem Satz, ob sie angewendet werden oder nicht.

In dem Fall, in dem eine Regel aufgrund der Vererbung auf das aktuell ausgewählte Element angewendet wird (d. H. Die Regel wurde auf einen Vorfahren angewendet und das ausgewählte Element erbt), 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 grau hinterlegter/abgeblendeter Text angezeigt.

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

Auszug aus dem Artikel

Dieses [Vererbungsszenario] kann gelegentlich zu Verwirrung führen, da der Standardwert Short-Hand-Eigenschaften; Abbildung 21 zeigt die voreingestellte Kurzreferenz Eigenschaften der font-Eigenschaft zusammen mit dem nicht geerbten Eigenschaften. Achten Sie einfach auf den Kontext, in dem Sie sich befinden, wenn Untersuchen von Elementen.

75
Michael Coleman

Dies bedeutet, dass die Regel vererbt wurde, jedoch nicht für das ausgewählte Element gilt:

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

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

greyed out rules are inherited from ancestors

Live-Beispiel: Prüfen Sie das Element, das den Text "Hallo, Welt!" Enthält.

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}
<div id="foo">Hello, world!</div>

76
Rob Sobers

Michael Coleman hat die richtige Antwort. Ich möchte nur ein einfaches Bild hinzufügen, um es zu begleiten. Der Link, den er eingefügt hat, hat dieses einfache Beispiel: http://commandlinefanatic.com/art033ex4.html

Das HTML/DOM sieht so aus ...

 HTML

Der Stilbereich in Chrome sieht folgendermaßen aus, wenn Sie das Element p auswählen.

 Styles Pane

Wie Sie sehen, 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 vererbbaren Stil hat. Dieser vererbbare Stil ist text-indent: 1em

background-color:blue ist nicht vererbbar, aber Teil des Regelsatzes, der text-indent: 1em enthält. Dieser Code ist unbeständig und die Entwickler von Chrome wollten beim Anzeigen von Regelsätzen vollständig sein. Um jedoch zwischen Stilen im Regelsatz zu unterscheiden, die von nicht veränderbaren Stilen geerbt werden können, sind die nicht inhertablen Stilarten ausgegraut.

23
Niko Bellic

Dies geschieht auch, wenn Sie über den Inspektor einen Stil hinzufügen, der jedoch nicht auf das ausgewählte Element angewendet wird. Normalerweise handelt es sich bei den gezeigten Stilen nur um die Elemente des ausgewählten Elements. Das Grau bedeutet, dass der gerade hinzugefügte Stil nicht das Element auswählt, das den Fokus im DOM-Navigator hat.

10
AaronLS

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 normalerweise die Regel color:red; ausgegraut und color:blue; an.

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

EDIT:

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

4
tcooc

Wenn Sie Webpack verwenden, wird jede im Quellcode geänderte CSS-Regel oder Eigenschaft deaktiviert, wenn die Seite nach einer Neuerstellung neu geladen wird. Das ist wirklich nervig und zwang mich jedes Mal, die Seite neu zu laden.

1
user2528531

Ich antworte lange nachdem die Frage bereits viele richtige Antworten hatte, da ich in Chome DevTools auf einen anderen Fall eines ausgeglichenen CSS-Codes geantwortet habe, der nicht editierbar ist: Der fragliche Block enthielt U + 200B ZERO WIDTH SPACE-Zeichen . Sobald ich diese gefunden und entfernt habe, konnte ich den Block in Chrome DevTools erneut bearbeiten. Vermutlich kann dies auch bei anderen Nicht-Ascii-Charakteren vorkommen, ich habe nicht versucht, das herauszufinden. 

0
davidreedernst

 enter image description here

Die neue Version des Chrome-Entwicklers zeigt, woher er vererbt wird.

0
cepix