¿Qué significan las propiedades de estilo cruzado en las herramientas de desarrollo de Google Chrome?

Al inspeccionar un elemento utilizando las herramientas de desarrollo de Chrome, en la pestaña de elementos, la barra 'Estilos' del lado derecho muestra las propiedades CSS correspondientes. A veces, algunas de estas propiedades son tachadas. ¿Qué significan estas propiedades?

Cuando una propiedad CSS se muestra como tachada, significa que se aplicó el estilo tachado, pero que fue anulado por un selector más específico, una regla más local o una propiedad posterior dentro de la misma regla.

(Casos especiales: un estilo también se mostrará como tachado si existe un estilo en una regla coincidente pero está comentado, o si lo ha deshabilitado manualmente al desmarcarlo dentro de las herramientas para desarrolladores de Chrome. También se mostrará como cruzado fuera, pero con un icono de error, si el estilo tiene un error de sintaxis).

Por ejemplo, si se aplicó un color de fondo a todos los divs, pero se aplicó un color de fondo diferente a divs con una identificación determinada, el primer color aparecerá pero se tachará, ya que el segundo color lo ha reemplazado (en la propiedad lista para el divcon esa identificación).

En otros comentarios. Si está utilizando consultas @media (como @media screen (max-width:500px)), preste especial atención a aplicar la consulta @media DESPUÉS de que haya terminado con los estilos normales. Porque la consulta @media se tachará (aunque sea más específica) si es seguida por css que manipula los mismos elementos. Ejemplo:

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

Además de la respuesta anterior, también quiero destacar un caso de propiedad tachada que realmente me sorprendió.

Si está agregando una imagen de fondo a un div:

<div class = "myBackground">

</div>

Desea escalar la imagen para que se ajuste a las dimensiones del div, por lo que esta sería su definición de clase normal.

.myBackground {

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

}

pero si intercambias el orden como: -

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

luego, en Chrome, verá el tamaño del fondo como marcado. No estoy seguro de por qué es esto, pero sí, no quieres meterte con eso.

Si desea aplicar el estilo incluso después de recibir una indicación de tachado, puede usarlo "!important"para aplicar el estilo. Puede que no sea una solución correcta, pero resuelva el problema.

Hay algunos casos en los que copia y pega el código CSS en algún lugar y se rompe el formato para que Chrome muestre la advertencia amarilla. Debería intentar volver a formatear el código CSS nuevamente y debería estar bien.