Was bedeuten die gekreuzten Stileigenschaften in Google Chrome-Devtools?

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?

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

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

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.

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.

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.