Was bedeuten die gekreuzten Stileigenschaften in den Google Chrome Devtools?

Question

Wenn Sie ein Element mit den Devtools von Chrome untersuchen, werden auf der Registerkarte "Elemente" in der rechten Leiste "Stile" die entsprechenden CSS-Eigenschaften angezeigt. Zuweilen sind einige dieser Eigenschaften durchgestrichen. Was bedeuten diese Eigenschaften?

Answer 1

Wenn eine CSS-Eigenschaft als durchgestrichen angezeigt wird, bedeutet dies, dass der durchgestrichene Stil angewendet wurde, dann aber durch einen spezifischeren Selektor, eine lokalere Regel oder durch eine spätere Eigenschaft innerhalb derselben Regel überschrieben wurde.

(Sonderfälle: Ein Stil wird auch als durchgestrichen angezeigt, wenn ein Stil in einer passenden Regel vorhanden, aber auskommentiert ist oder wenn Sie ihn manuell deaktiviert haben, indem Sie ihn in den Chrome-Entwicklerwerkzeugen abgewählt haben. Er wird auch als durchgestrichen angezeigt, aber mit einem Fehlersymbol, wenn der Stil einen Syntaxfehler hat).

Wurde zum Beispiel eine Hintergrundfarbe auf alle div s, aber eine andere Hintergrundfarbe wurde auf div s mit einer bestimmten ID, wird die erste Farbe zwar angezeigt, aber durchgestrichen, da die zweite Farbe sie ersetzt hat (in der Eigenschaftsliste für die div mit dieser ID).

Answer 2

Eine Anmerkung am Rande. Wenn Sie Folgendes verwenden @media Abfragen (wie @media screen (max-width:500px )) achten Sie besonders auf die Anwendung der @media-Abfrage NACH sind Sie mit den normalen Stilen fertig. Denn die @media-Abfrage wird durchgestrichen (auch wenn sie spezifischer ist), wenn auf sie ein 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 **

Answer 3

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

Wenn Sie ein Hintergrundbild zu einem div :

<div class = "myBackground">

</div>

Sie möchten das Bild so skalieren, dass es in die Abmessungen des div passt, also wäre dies Ihre normale Klassendefinition.

.myBackground {

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

}

aber wenn Sie die Reihenfolge vertauschen als :-

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

dann sehen Sie in Chrome Hintergrund-Größe als durchgestrichen. Ich bin mir nicht sicher, warum das so ist, aber ja, Sie wollen nicht damit herumspielen.

Answer 4

Wenn Sie den Stil auch nach der Anzeige des Durchschlags anwenden möchten, können Sie "!important" um den Stil durchzusetzen. Es ist vielleicht nicht die richtige Lösung, aber es löst das Problem.

Answer 5

Es gibt zwei Möglichkeiten, um festzustellen, welche Regeln außer Kraft gesetzt sind:

1. Suchen Sie die Eigenschaft im Filterfeld oben auf der Registerkarte "Stile". Es werden alle Regeln angezeigt, die diese Eigenschaft enthalten, wobei die Eigenschaft gelb hervorgehoben ist.

   

2. Suchen Sie auf der Registerkarte "Berechnet" nach demselben Eigenschaftstyp, und erweitern Sie diese, um die Quelle der verschiedenen Regeln zu sehen, die versuchen, diese Eigenschaft anzuwenden.