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
- é uma regra / propriedade padrão que o navegador aplica, que inclui propriedades de mão abreviada padrão.
- 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.