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?
css
google-chrome
google-chrome-devtools
Rohitmishra
quelle
quelle
Antworten:
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
div
s angewendet wurde , aber eine andere Hintergrundfarbe aufdiv
s 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 diediv
mit dieser ID).quelle
border-color
einfachborder-color
in 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.!important
, der ihn überschreibt.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:quelle
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:
Sie möchten das Bild so skalieren, dass es in die Abmessungen des Div passt, sodass dies Ihre normale Klassendefinition ist.
aber wenn Sie die Reihenfolge austauschen als: -
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.
quelle
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.quelle
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.
quelle