Che cosa fanno le proprietà di stile incrociate in Google Chrome DevTools media?

Question

Durante l'ispezione di un elemento utilizzando devtools Chrome, nella scheda elementi, il lato destro 'stili' barra mostra la proprietà CSS corrispondenti. A volte, alcune di queste proprietà sono colpiti-through. Cosa significano questi dati?

Answer 1

Quando un CSS proprietà mostra come barrato, vuol dire che lo stile barrato è stato applicato, ma poi escluso da un selettore più specifico, una regola più locale, o da una struttura in seguito all'interno della stessa regola.

(Casi particolari:. Uno stile sarà anche mostrato come barrato se uno stile esiste in una regola di corrispondenza, ma è commentata, o se hai disattivato manualmente deselezionando entro gli strumenti di sviluppo Chrome Sarà anche mostrare come una croce, ma con un'icona di errore, se lo stile ha un errore di sintassi.)

Ad esempio, se un colore di sfondo è stato applicato a tutti divs, ma un colore di sfondo diverso è stato applicato a divs con un certo id, il primo colore apparirà ma sarà cancellato, il secondo colore è sostituita ( nella lista di proprietà per il div con quella id).

Answer 2

Su un lato nota. Se si utilizza @media query (come @media screen (max-width:500px)) prestare particolare attenzione all'applicazione @media interrogazione DOPO si è fatto con stili normali. Poiché @media query viene cancellata (anche se è più specifico) se seguiti 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 **

Answer 3

In aggiunta alla risposta di cui sopra voglio anche evidenziare un caso di proprietà striked quale mi ha davvero sorpreso.

Se si aggiunge un'immagine di sfondo ad un div:

<div class = "myBackground">

</div>

Si vuole ridimensionare l'immagine per adattarsi alle dimensioni del div quindi questa sarebbe la vostra definizione di classe normale.

.myBackground {

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

}

, ma se si interscambio l'ordine come: -

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

poi in cromo si vedrà background-size come barrato. Non sono sicuro perché questo è, ma sì non volete pasticciare con essa.

Answer 4

Se si vuole applicare lo stile, anche dopo aver ottenuto l'indicazione colpito-depressione, è possibile utilizzare "!important" per far rispettare lo stile. Esso non può essere una soluzione giusta, ma risolvere il problema.

Answer 5

Ci sono alcuni casi in cui si copia e incolla il codice CSS in qualche parte e si rompe il formato in modo Chrome mostrare l'avviso di colore giallo. Si dovrebbe cercare di riformattare nuovamente il codice CSS e dovrebbe andare bene.