Lo que hacen las propiedades de estilo cruzadas en Google Chrome Devtools media?

Question

Al inspeccionar un elemento utilizando devtools de Chrome, en la pestaña de elementos, el lado derecho 'estilos' de barras muestra los correspondientes propiedades CSS. A veces, algunas de estas propiedades están tachados. ¿Qué significan estas propiedades?

Answer 1

Cuando una propiedad CSS muestra como tachados, significa que se aplica el estilo tachada, pero luego se reemplaza por un selector más específico, una regla más local, o por una propiedad más adelante dentro de la misma regla.

(Casos especiales:. Un estilo también se mostrará como tachados si existe un estilo en una regla de juego, pero se comenta fuera, o si se ha desactivado manualmente quitando la marca dentro de las herramientas para desarrolladores de Chrome También mostrar como tachado, pero con un icono de error, si el estilo tiene un error de sintaxis.)

Por ejemplo, si un color de fondo se aplicó a todos divs, pero un color de fondo diferente se aplicó a divs con una cierta identificación, el primer color se mostrará pero será tachado, como el segundo color que ha sido sustituido ( en la lista de propiedades para el div con ese id).

Answer 2

En una nota lateral. Si está utilizando @media consultas (como @media screen (max-width:500px)) prestar especial atención a la aplicación de @media consulta después que haya terminado con estilos normales. Debido @media consulta será tachado (a pesar de que es más específico) si es seguido 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 **

Answer 3

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

Si va a añadir una imagen de fondo a un div:

<div class = "myBackground">

</div>

¿Quieres escalar la imagen para que quepa en las dimensiones de la div por lo que este 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 intercambiar el orden como: -

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

A continuación, en cromo se verá fondo de tamaño como el tachado. No estoy seguro de por qué esto es, pero sí que no desea meterse con él.

Answer 4

Si desea aplicar el estilo, incluso después de recibir la indicación-parabólicos golpeado, puede utilizar "!important" para hacer cumplir el estilo. Puede que no sea una solución correcta, pero resolver el problema.

Answer 5

Hay algunos casos cuando se copia y pega el código CSS en alguna parte y se rompe el formato para Chrome muestra la alerta amarilla. Usted debe tratar de cambiar el formato del código CSS de nuevo y que debe estar bien.