O que as propriedades de estilo cruzado no Google Chrome Devtools significam?

Question

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

Answer 1

Quando uma propriedade CSS mostra como atingida, significa que o estilo cruzado foi aplicado, mas depois substituído por um seletor mais específico, uma regra mais local ou por uma propriedade posterior na mesma regra.

(Casos especiais: um estilo também será mostrado como atingido se houver um estilo em uma regra correspondente, mas for comentado, ou se você o desativou manualmente, desmarcando-o dentro das ferramentas do desenvolvedor do Chrome. Ele também será exibido como cruzado fora, mas com um ícone de erro, se o estilo tiver um erro de sintaxe.)

Por exemplo, se uma cor de fundo foi aplicada a todos divs, mas uma cor de fundo diferente foi aplicada a divs Com um certo ID, a primeira cor será exibida, mas será riscada, pois a segunda cor substituiu (na lista de propriedades para o div com esse id).

Answer 2

Em uma nota lateral. Se você está usando @meios de comunicação consultas (como @media screen (max-width:500px)) Preste atenção especial à aplicação da consulta @media DEPOIS Você terminou com estilos normais. Porque a consulta @media será riscada (mesmo que seja mais específica) se seguida pelo 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 **

Answer 3

Além da resposta acima, também quero destacar um caso de imóveis atacados que realmente me surpreendeu.

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

<div class = "myBackground">

</div>

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

.myBackground {

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

}

Mas se você trocar a ordem 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á tamanho de fundo como atacado. Não sei por que isso é, mas sim, você não quer mexer com isso.

Answer 4

Se você quiser aplicar o estilo mesmo depois de receber uma indicação de curva, você pode usar "!important" Para fazer cumprir o estilo. Pode não ser uma solução certa, mas resolva o problema.

Answer 5

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 reformar o código CSS novamente e tudo bem.