Was tun die gekreuzten Stileigenschaften in Google Chrome DevTools bedeuten?

Question

Während ein Element mit Chrome devtools Inspektion, in den Elementen Registerkarte die rechte Seite ‚Styles‘ Leiste zeigt die entsprechenden CSS-Eigenschaften. Manchmal sind einige dieser Eigenschaften durchgestrichener. Was diese Eigenschaften bedeuten?

Answer 1

Wenn ein CSS-Eigenschaft zeigt als durchgestrichener, bedeutet dies, dass die durchgestrichenen Stil angewendet wurde, aber dann durch einen spezifischeren Selektor außer Kraft gesetzt, eine lokale Regel, oder durch eine spätere Eigenschaft innerhalb derselben Regel.

(Sonderfälle: a. Stil wird auch als durchgestrichener gezeigt werden, wenn ein Stil existiert in einer passenden Regel aber auf Kommentar gesetzt ist, oder wenn Sie es manuell deaktiviert haben, indem sie innerhalb der Chrome-Entwicklertool unchecking Es wird auch zeigen, wie durchgestrichen, aber mit einem Fehler-Symbol, wenn der Stil einen Syntaxfehler hat.)

Zum Beispiel, wenn eine Hintergrundfarbe für alle divs angewandt wurde, aber eine andere Hintergrundfarbe wurde auf divs mit einer bestimmten ID angewandt, wird die erste Farbe zeigt sich aber durchgestrichen werden, da die zweite Farbe, die es ersetzt hat ( in der Eigenschaftenliste für die div mit dieser ID).

Answer 2

Auf einer Seite zur Kenntnis. Wenn Sie mit @media Abfragen (wie @media screen (max-width:500px)) besonderes Augenmerk auf die Anwendung @media Abfrage nach Sie mit normalen Arten getan werden. Da @media Abfrage wird durchgestrichen (auch wenn es mehr spezifisch ist), wenn sie von CSS gefolgt, dass manipuliert die gleichen Elemente. 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

Neben der oben Antwort möchte ich auch einen Fall von durchgestrichenen Eigenschaft hervorzuheben, die mich wirklich überrascht.

Wenn Sie hinzufügen, ein Hintergrundbild zu einem div:

<div class = "myBackground">

</div>

Sie mögen das Bild maßstäblich in den Abmessungen des div passen so diese Ihre normale Klassendefinition wäre.

.myBackground {

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

}

, aber wenn Sie vertauschen die Reihenfolge wie: -

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

dann in Chrom Sie werden sehen, Hintergrund-size als gestrichen. Ich bin nicht sicher, warum das so ist, aber ja Sie nicht mit ihm verwirren wollen.

Answer 4

Wenn Sie den Stil auch nach dem Aufstehen schlug Trog Anzeige anwenden möchten, können Sie "!important" verwenden, um die Art zu erzwingen. Es kann nicht eine richtige Lösung sein, aber das Problem lösen.

Answer 5

Es gibt einige Fälle, wenn Sie den CSS-Code in irgendwo kopieren und einfügen und es bricht das Format so Chrome die gelbe Warnung zeigen. Sie sollten versuchen, den CSS-Code erneut zu formatieren und es sollte in Ordnung sein.