O que significa quando uma regra CSS está acinzentada no inspetor de elementos do Chrome?

Estou inspecionando um h2elemento em uma página da web usando o inspetor de elementos do Google Chrome e algumas das regras de CSS - que parecem ser aplicadas - ficam esmaecidas. Parece que um strike-through indica que uma regra foi substituída, mas o que significa quando um estilo está acinzentado?

Para mim, as respostas atuais não explicaram o assunto completamente o suficiente, por isso estou adicionando essa resposta que, espero, pode ser útil para outras pessoas.

Acinzentado / esmaecido fora texto, pode significar tanto

1. é uma regra / propriedade padrão que o navegador aplica, que inclui propriedades de mão abreviada padrão.
2. Envolve herança que é um pouco mais complicada.

Herança

Nota: O painel "estilo" das ferramentas de desenvolvimento do Chrome exibirá um conjunto de regras, porque uma ou mais regras do conjunto estão sendo aplicadas ao nó DOM atualmente selecionado. Eu acho que, por uma questão de integridade, as ferramentas de desenvolvimento mostram todas as regras desse conjunto, sejam elas aplicadas ou não.

No caso de uma regra ser aplicada ao elemento atualmente selecionado devido à herança (ou seja, a regra foi aplicada a um ancestral e o elemento selecionado a herdou), o chrome exibirá novamente o conjunto de regras inteiro.

As regras aplicadas ao elemento atualmente selecionado aparecem no texto normal.

Se uma regra existir nesse conjunto, mas não for aplicada por ser uma propriedade não herdável (por exemplo, cor de fundo), ela aparecerá como texto acinzentado / esmaecido.

aqui está um artigo que fornece uma boa explicação - (Nota: o item relevante está na parte inferior do artigo - figura 21 - infelizmente a seção relevante não tem um cabeçalho) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Trecho do artigo

Esse [cenário de herança] ocasionalmente pode criar um pouco de confusão, porque as propriedades padrão da mão abreviada; a figura 21 ilustra as propriedades abreviadas padrão da propriedade font, juntamente com as propriedades não herdadas. Esteja ciente do contexto que você está olhando ao examinar elementos.

Isso significa que a regra foi herdada, mas não é aplicável ao elemento selecionado:

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

O painel contém apenas propriedades de regras diretamente aplicáveis ​​ao elemento selecionado. Para exibir adicionalmente as propriedades herdadas, ative a caixa de seleção Mostrar herança. Essas propriedades serão exibidas em uma fonte esmaecida.

Exemplo ao vivo: inspecione o elemento que contém o texto "Olá, mundo!"

div { 
  margin: 0;
}

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

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

Michael Coleman tem a resposta certa. Eu só quero adicionar uma imagem simples para acompanhar. O link que ele incluiu tem este exemplo simples: http://commandlinefanatic.com/art033ex4.html

O HTML / DOM se parece com isso ...

O Painel de Estilos no Chrome fica assim quando você seleciona o elemento p ...

Como você pode ver, o elemento p herda de seus ancestrais (os divs). Então, por que o estilo está background-color: blueacinzentado? Porque faz parte de um conjunto de regras que possui pelo menos um estilo herdável. Esse estilo herdável étext-indent: 1em

background-color:bluenão é herdável, mas faz parte do conjunto de regras que contém o text-indent: 1emque é herdável e os desenvolvedores do Chrome queriam estar completos ao exibir conjuntos de regras. No entanto, para distinguir entre estilos no conjunto de regras herdáveis ​​e estilos que não são, os estilos que não são herdáveis ​​ficam acinzentados.

Isso também ocorre se você adicionar um estilo pelo inspetor, mas esse novo estilo não se aplica ao elemento que você selecionou. Normalmente, os estilos mostrados são apenas os do elemento selecionado, portanto, o cinza indica que o estilo que você acabou de adicionar não seleciona o elemento que está focado no navegador DOM.

Isso significa que a regra foi substituída por outra regra com maior prioridade. Por exemplo, folhas de estilo com:

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

O inspetor mostrará a regra color:red;acinzentada ecolor:blue; normalmente.

Leia sobre a herança de CSS para saber quais regras são herdadas / têm prioridade mais alta.

EDITAR:

Confusão: as regras acinzentadas são as regras não definidas, que usam uma folha de estilo padrão especial aplicada a todos os elementos (as regras que tornam o elemento renderizável, porque todos os estilos precisam ter um valor).

Ao usar o webpack, qualquer regra ou propriedade css que foi alterada no código-fonte fica acinzentada quando a página é recarregada após uma reconstrução. Isso é realmente irritante e me forçou a recarregar a página todas as vezes.

A nova versão do desenvolvedor do Chrome mostra de onde é herdada.

Estou respondendo muito tempo depois que a pergunta já tem muitas respostas corretas, porque encontrei um caso diferente de ter um bloco de código CSS acinzentado e não editável no Chome DevTools: O bloco em questão continha caracteres U + 200B ZERO WIDTH SPACE . Depois de encontrá-los e removê-los, eu poderia editar o bloco no Chrome DevTools novamente. Presumivelmente, isso pode acontecer com outros personagens não-ascii também, não tentei descobrir isso.