¿Qué significa que una regla CSS esté atenuada en el inspector de elementos de Chrome?

Estoy inspeccionando un h2elemento en una página web usando el inspector de elementos de Google Chrome y algunas de las reglas CSS, que parecen estar aplicadas, están atenuadas. Parece que un tachado indica que una regla fue anulada, pero ¿qué significa cuando un estilo está atenuado?

Para mí, las respuestas actuales no explicaron el problema completamente, por lo que estoy agregando esta respuesta que espero sea útil para otros.

En gris / atenuado fuera de texto, puede significar o bien

1. es una regla / propiedad predeterminada que aplica el navegador, que incluye propiedades predeterminadas de abreviatura.
2. Implica una herencia que es un poco más complicada.

Herencia

Nota: El panel de "estilo" de las herramientas de desarrollo de Chrome mostrará un conjunto de reglas, porque una o más reglas del conjunto se están aplicando al nodo DOM seleccionado actualmente. Supongo que, en aras de la exhaustividad, las herramientas de desarrollo muestran todas las reglas de ese conjunto, se apliquen o no.

En el caso de que se aplique una regla al elemento seleccionado actualmente debido a la herencia (es decir, la regla se aplicó a un antepasado y el elemento seleccionado la heredó), Chrome volverá a mostrar todo el conjunto de reglas.

Las reglas que se aplican al elemento seleccionado actualmente aparecen en texto normal.

Si existe una regla en ese conjunto pero no se aplica porque es una propiedad no heredable (por ejemplo, color de fondo), aparecerá como texto atenuado / atenuado.

Aquí hay un artículo que da una buena explicación - (Nota: el elemento relevante está en la parte inferior del artículo - figura 21 - desafortunadamente la sección relevante no tiene un título) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Extracto del articulo

Este [escenario de herencia] ocasionalmente puede crear un poco de confusión, debido a las propiedades predeterminadas de mano corta; la figura 21 ilustra las propiedades predeterminadas de mano corta de la propiedad de fuente junto con las propiedades no heredadas. Solo tenga en cuenta el contexto que está viendo al examinar elementos.

Significa que la regla se ha heredado, pero no es aplicable al elemento seleccionado:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

El panel contiene solo propiedades de reglas que son directamente aplicables al elemento seleccionado. Para mostrar además propiedades heredadas, active la casilla de verificación Mostrar heredado. Dichas propiedades se mostrarán en una fuente atenuada.

Ejemplo en vivo: inspeccione el elemento que contiene el texto "¡Hola, mundo!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

Michael Coleman tiene la respuesta correcta. Solo quiero agregar una imagen simple para acompañarla. El enlace que incluyó tiene este simple ejemplo: http://commandlinefanatic.com/art033ex4.html

El HTML / DOM se ve así ...

El panel de estilos en Chrome se ve así cuando selecciona el elemento p ...

Como puede ver, el elemento p hereda de sus antepasados ​​(los divs). Entonces, ¿por qué el estilo está background-color: blueatenuado? Porque es parte de un conjunto de reglas que tiene al menos un estilo que es heredable. Ese estilo heredable estext-indent: 1em

background-color:blueno es heredable, pero es parte del conjunto de reglas que contiene lo text-indent: 1emque es indescifrable y los desarrolladores de Chrome querían estar completos al mostrar conjuntos de reglas. Sin embargo, para distinguir entre los estilos en el conjunto de reglas que son heredables de los estilos que no lo son, los estilos que no son inherentes están atenuados.

Esto también ocurre si agrega un estilo a través del inspector, pero ese nuevo estilo no se aplica al elemento que ha seleccionado. Por lo general, los estilos que se muestran son solo los del elemento seleccionado, por lo que el gris indica que el estilo que acaba de agregar no selecciona el elemento que tiene el foco en el navegador DOM.

Significa que la regla ha sido reemplazada por otra regla con mayor prioridad. Por ejemplo, hojas de estilo con:

h2 {
  color: red;
}
h2 {
  color: blue;
}

El inspector mostrará la regla en color:red;gris y color:blue;normalmente.

Lea sobre la herencia CSS para saber qué reglas se heredan / tienen mayor prioridad.

EDITAR:

Mezcla: las reglas en gris son las reglas sin definir, que utilizan una hoja de estilo predeterminada especial que se aplica a todos los elementos (las reglas que hacen que el elemento sea representable, porque todos los estilos deben tener un valor).

Cuando se usa webpack, cualquier regla o propiedad css que se haya cambiado en el código fuente aparece atenuada cuando la página se recarga después de una reconstrucción. Esto es realmente molesto y me obligó a volver a cargar la página cada vez.

La nueva versión del desarrollador de Chrome muestra de dónde se hereda.

Respondo mucho después de que la pregunta ya tenga muchas respuestas correctas porque encontré un caso diferente de tener un bloque de código CSS atenuado e ineditable en Chome DevTools: el bloque en cuestión contenía caracteres U + 200B ZERO WIDTH SPACE . Una vez que los encontré y los eliminé, pude editar el bloque en Chrome DevTools nuevamente. Presumiblemente, esto podría suceder también con otros personajes no ascii, no he tratado de resolverlo.