Was bedeuten die gekreuzten Stileigenschaften in Google Chrome-Devtools?

274

Während Sie ein Element mit den devtools von Chrome untersuchen, werden auf der Registerkarte "Elemente" auf der rechten Registerkarte "Stile" die entsprechenden CSS-Eigenschaften angezeigt. Manchmal sind einige dieser Eigenschaften durchgestrichen. Was bedeuten diese Eigenschaften?

Rohitmishra
quelle
4
Ich habe diese Frage vorweggenommen. +1 dafür.
Rajesh Paul

Antworten:

314

Wenn eine CSS-Eigenschaft als durchgestrichen angezeigt wird, bedeutet dies, dass der durchgestrichene Stil angewendet wurde, dann aber von einem spezifischeren Selektor, einer lokaleren Regel oder einer späteren Eigenschaft innerhalb derselben Regel überschrieben wurde.

(Sonderfälle: Ein Stil wird auch als durchgestrichen angezeigt, wenn ein Stil in einer übereinstimmenden Regel vorhanden ist, aber auskommentiert ist oder wenn Sie ihn manuell deaktiviert haben, indem Sie ihn in den Chrome-Entwicklertools deaktiviert haben. Er wird auch als gekreuzt angezeigt out, aber mit einem Fehlersymbol, wenn der Stil einen Syntaxfehler aufweist.)

Wenn beispielsweise eine Hintergrundfarbe auf alle divs angewendet wurde , aber eine andere Hintergrundfarbe auf divs mit einer bestimmten ID angewendet wurde , wird die erste Farbe angezeigt, jedoch durchgestrichen, da die zweite Farbe sie ersetzt hat (in der Eigenschaft Liste für die divmit dieser ID).

Jacob Mattison
quelle
18
Nebenbei bemerkt, durchgestrichene Eigenschaften können diejenigen sein, die später in derselben CSS-Regel (wie in der CSS-Spezifikation gefordert) von denselben gleichnamigen Eigenschaften "annulliert" werden
Alexander Pavlov,
57
@JacobM: Erfahren Sie, welche Eigenschaft die markierte Eigenschaft überschreibt.
ArunRaj
51
@ArunRaj - Es gibt keine einfache Möglichkeit zu erkennen, welche Eigenschaft (en) die durchgestrichene überschreibt. Eine Möglichkeit besteht darin, auf der Registerkarte "Berechnete" Stile nach demselben Eigenschaftstyp zu suchen. Wenn Sie diese erweitern, sollten Sie die Quelle der verschiedenen Regeln sehen, die versuchen, diese Eigenschaft anzuwenden (einschließlich der tatsächlich aktiven). . Wenn Sie also feststellen, dass "Schriftgröße: 11px" durchgestrichen ist, suchen Sie in den berechneten Eigenschaften nach "Schriftgröße", und Sie sollten alle Stellen sehen, an denen die Schriftgröße angewendet wird, einschließlich der tatsächlich aktiven. Hoffe das hilft.
Jacob Mattison
7
Oben auf der Registerkarte "Stile" befindet sich jetzt ein Filterfeld. Wenn Sie sich fragen, was überschrieben wurde, geben Sie border-coloreinfach border-colorin den Filter ein. Es werden alle Regeln angezeigt, die diese Eigenschaft enthalten, wobei die Eigenschaft gelb hervorgehoben ist. Diese Funktion ist auch in Firefox verfügbar.
Joeytwiddle
4
Ich wollte auch hinzufügen: Wenn ein Stil durchgestrichen ist, aber bereits oben steht, haben Sie möglicherweise irgendwo einen CSS-Stil !important, der ihn überschreibt.
Dominic K
12

Als Randnotiz. Wenn Sie mit @media Abfragen (wie @media screen (max-width:500px)) besonderes Augenmerk auf die Anwendung @media Abfrage AFTER Sie mit normalen Arten getan werden. Weil die @ media-Abfrage durchgestrichen wird (obwohl sie spezifischer ist), wenn CSS folgt, das dieselben Elemente manipuliert. Beispiel:

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **
Sanjihan
quelle
Was ist, wenn sich die Medienabfragen in einer anderen CSS-Datei befinden?
Carlos Hernández Gil
11

Zusätzlich zu der obigen Antwort möchte ich auch einen Fall von durchgestrichenem Eigentum hervorheben, der mich wirklich überrascht hat.

Wenn Sie einem div ein Hintergrundbild hinzufügen:

<div class = "myBackground">

</div>

Sie möchten das Bild so skalieren, dass es in die Abmessungen des Div passt, sodass dies Ihre normale Klassendefinition ist.

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

aber wenn Sie die Reihenfolge austauschen als: -

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

dann sehen Sie in Chrom die Hintergrundgröße als durchgestrichen. Ich bin mir nicht sicher, warum das so ist, aber ja, du willst dich nicht damit anlegen.

Rishul Matta
quelle
8

Wenn Sie den Stil auch nach "!important"einer durchgestrichenen Anzeige anwenden möchten, können Sie ihn verwenden , um ihn zu erzwingen. Es ist möglicherweise keine richtige Lösung, aber lösen Sie das Problem.

Nanda
quelle
Ich hatte Probleme, eine GoogleMap für Handys über Medien zu skalieren. Ich habe eine Grundeinstellung für Browser (ohne Medien), gefolgt von verschiedenen Medien mit kleineren Größen, was nicht funktioniert hat (korrekter Stil für Handys in GC angezeigt, aber mit Durchgestrichen). Nachdem ich! Wichtig hinzugefügt habe, funktioniert es, aber ich verstehe die "Logik" dahinter nicht ...
FredyWenger
-5

Es gibt einige Fälle, in denen Sie den CSS-Code irgendwo kopieren und einfügen und das Format dadurch unterbrochen wird, dass Chrome die gelbe Warnung anzeigt. Sie sollten versuchen, den CSS-Code erneut zu formatieren, und es sollte in Ordnung sein.

hien711
quelle
2
Die Frage stellte nichts über "gelbe Warnungen". Diese Antwort sollte bestenfalls einen Kommentar enthalten.
Simon