O que significam as propriedades de estilo cruzado nos devtools do Google Chrome?

Ao inspecionar um elemento usando as ferramentas do Chrome, na guia Elementos, a barra 'Estilos' do lado direito mostra as propriedades CSS correspondentes. Às vezes, algumas dessas propriedades são atingidas. O que essas propriedades significam?

Quando uma propriedade CSS aparece como riscada, isso significa que o estilo riscado foi aplicado, mas substituído por um seletor mais específico, uma regra mais local ou por uma propriedade posterior dentro da mesma regra.

(Casos especiais: um estilo também será mostrado como detalhado se um estilo existir em uma regra de correspondência, mas for comentado ou se você o tiver desativado manualmente, desmarcando-o nas ferramentas de desenvolvedor do Chrome. Ele também será exibido como cruzado mas com um ícone de erro, se o estilo tiver um erro de sintaxe.)

Por exemplo, se uma cor de plano de fundo foi aplicada a todos os divs, mas uma cor de plano de fundo diferente foi aplicada a divs com um determinado ID, a primeira cor será exibida, mas será riscada, conforme a segunda cor a substituiu (na propriedade lista para o divcom esse ID).

Em uma nota lateral. Se você estiver usando as consultas @media (como @media screen (max-width:500px)), preste atenção especial ao aplicar a consulta @media DEPOIS de concluir com estilos normais. Porque a consulta @media será riscada (mesmo que seja mais específica) se seguida por css que manipula os mesmos elementos. Exemplo:

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

Além da resposta acima, também quero destacar um caso de propriedade riscada que realmente me surpreendeu.

Se você estiver adicionando uma imagem de plano de fundo a uma div:

<div class = "myBackground">

</div>

Você deseja dimensionar a imagem para caber nas dimensões da div, para que esta seja sua definição de classe normal.

.myBackground {

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

}

mas se você trocar o pedido como: -

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

então, no chrome, você verá o tamanho do plano de fundo como riscado. Não sei por que isso acontece, mas sim, você não quer mexer com isso.

Se você deseja aplicar o estilo mesmo depois de receber uma indicação através da marcação, você pode usá-lo "!important"para aplicá-lo. Pode não ser a solução certa, mas resolve o problema.

Há alguns casos em que você copia e cola o código CSS em algum lugar e ele quebra o formato para que o Chrome mostre o aviso amarelo. Você deve tentar reformatar o código CSS novamente e deve estar correto.