Che cosa significano le proprietà dello stile incrociato in devtools di Google Chrome?

Durante l'ispezione di un elemento utilizzando gli strumenti di Chrome, nella scheda degli elementi, la barra "Stili" sul lato destro mostra le proprietà CSS corrispondenti. A volte, alcune di queste proprietà sono barrate. Cosa significano queste proprietà?

Quando una proprietà CSS viene visualizzata come barrata, significa che è stato applicato lo stile barrato, ma poi sovrascritto da un selettore più specifico, una regola più locale o da una proprietà successiva all'interno della stessa regola.

(Casi speciali: uno stile verrà anche mostrato come barrato se uno stile esiste in una regola di corrispondenza ma è commentato o se lo hai disabilitato manualmente deselezionandolo negli strumenti di sviluppo di Chrome. Mostrerà anche come incrociato fuori, ma con un'icona di errore, se lo stile ha un errore di sintassi.)

Ad esempio, se un colore di sfondo è stato applicato a tutte le divs, ma un colore di sfondo diverso è stato applicato a divs con un determinato id, il primo colore verrà visualizzato ma verrà barrato, poiché il secondo colore lo ha sostituito (nella proprietà lista per divcon quell'id).

In una nota a margine. Se si utilizzano query @media (ad esempio@media screen (max-width:500px )) prestare particolare attenzione all'applicazione della query @media DOPO aver terminato con stili normali. Perché la query @media verrà barrata (anche se è più specifica) se seguita da CSS che manipola gli stessi elementi. Esempio:

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

Oltre alla risposta di cui sopra, desidero anche evidenziare un caso di proprietà cancellata che mi ha davvero sorpreso.

Se stai aggiungendo un'immagine di sfondo a un div:

<div class = "myBackground">

</div>

Vuoi ridimensionare l'immagine per adattarla alle dimensioni del div in modo che questa sia la tua normale definizione di classe.

.myBackground {

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

}

ma se si scambia l'ordine come: -

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

quindi in Chrome vedrai le dimensioni dello sfondo come cancellate. Non sono sicuro del perché, ma sì, non vuoi rovinarlo.

Se si desidera applicare lo stile anche dopo aver ricevuto l'indicazione barrata, è possibile utilizzare "!important"per applicare lo stile. Potrebbe non essere una soluzione giusta ma risolvere il problema.

Ci sono alcuni casi in cui si copia e incolla il codice CSS da qualche parte e si interrompe il formato in modo che Chrome mostri l'avviso giallo. Dovresti provare a riformattare di nuovo il codice CSS e dovrebbe andare bene.