Che cosa significa quando una regola CSS è disattivata nella finestra di ispezione degli elementi di Chrome?

Sto ispezionando un h2elemento in una pagina Web utilizzando la finestra di ispezione degli elementi di Google Chrome e alcune delle regole CSS - che sembrano essere applicate - sono disattivate. Sembra che un barrato indica che una regola è stata ignorata, ma cosa significa quando uno stile è disattivato?

Per me le risposte attuali non hanno spiegato il problema in modo sufficientemente completo, quindi sto aggiungendo questa risposta che si spera possa essere utile agli altri.

Il testo in grigio / oscurato può significare entrambi

1. è una regola / proprietà predefinita che viene applicata dal browser, che include proprietà abbreviate predefinite.
2. Implica l'eredità che è un po 'più complicata.

Eredità

Nota: il pannello "stile" degli strumenti di sviluppo di Chrome visualizzerà una serie di regole, poiché una o più regole della serie vengono applicate al nodo DOM attualmente selezionato. Immagino che, per completezza, gli strumenti di sviluppo mostrino tutte le regole di quell'insieme, indipendentemente dal fatto che vengano applicate o meno.

Nel caso in cui una regola venga applicata all'elemento attualmente selezionato a causa dell'ereditarietà (ovvero la regola è stata applicata a un antenato e l'elemento selezionato l'ha ereditata), Chrome visualizzerà nuovamente l'intero set di regole.

Le regole applicate all'elemento attualmente selezionato vengono visualizzate nel testo normale.

Se esiste una regola in quell'insieme ma non viene applicata perché è una proprietà non ereditabile (ad esempio il colore di sfondo), verrà visualizzata come testo in grigio / attenuato.

ecco un articolo che fornisce una buona spiegazione - (Nota: l'elemento pertinente si trova in fondo all'articolo - figura 21 - purtroppo la sezione pertinente non ha un titolo) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Estratto dall'articolo

Questo [scenario di ereditarietà] può occasionalmente creare un po 'di confusione, poiché le proprietà abbreviate predefinite; la figura 21 illustra le proprietà abbreviate predefinite della proprietà font insieme alle proprietà non ereditate. Basta essere consapevoli del contesto che si sta osservando quando si esaminano gli elementi.

Significa che la regola è stata ereditata, ma non è applicabile all'elemento selezionato:

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

Il riquadro contiene solo proprietà delle regole direttamente applicabili all'elemento selezionato. Per visualizzare ulteriormente le proprietà ereditate, abilitare la casella di controllo Mostra ereditato. Tali proprietà verranno visualizzate in un carattere attenuato.

Esempio live: ispeziona l'elemento contenente il testo "Ciao, mondo!"

div { 
  margin: 0;
}

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

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

Michael Coleman ha la risposta giusta. Voglio solo aggiungere una semplice immagine per accompagnarla. Il link che ha incluso ha questo semplice esempio: http://commandlinefanatic.com/art033ex4.html

L'HTML / DOM si presenta così ...

Il riquadro Stili in Chrome si presenta così quando si seleziona l'elemento p ...

Come puoi vedere, l'elemento p eredita dai suoi antenati (i div). Allora perché lo stile è background-color: bluedisattivato? Perché fa parte di un set di regole che ha almeno uno stile ereditabile. Quello stile ereditario ètext-indent: 1em

background-color:bluenon è ereditabile ma fa parte del set di regole che contiene ciò text-indent: 1emche è ereditabile e gli sviluppatori di Chrome hanno voluto essere completi durante la visualizzazione dei set di regole. Tuttavia, per distinguere tra stili nel set di regole che sono ereditabili da stili che non lo sono, gli stili che non sono ereditabili vengono disattivati.

Ciò si verifica anche se aggiungi uno stile tramite la finestra di ispezione, ma quel nuovo stile non si applica all'elemento che hai selezionato. Di solito gli stili mostrati sono solo quelli per l'elemento selezionato, quindi il grigio indica che lo stile che hai appena aggiunto non seleziona l'elemento che ha lo stato attivo nel navigatore DOM.

Significa che la regola è stata sostituita con un'altra regola con priorità più alta. Ad esempio fogli di stile con:

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

L'ispettore mostrerà la regola in color:red;grigio ecolor:blue; normalmente.

Leggi l' eredità CSS per scoprire quali regole sono ereditate / hanno una priorità più alta.

MODIFICARE:

Mixup: le regole in grigio sono le regole non impostate, che utilizzano uno speciale foglio di stile predefinito che viene applicato a tutti gli elementi (le regole che rendono l'elemento renderizzabile, perché tutti gli stili devono avere un valore).

Quando si utilizza il webpack, qualsiasi regola CSS o proprietà che è stata modificata nel codice sorgente viene disattivata quando la pagina viene ricaricata dopo una ricostruzione. Questo è davvero fastidioso e mi ha costretto a ricaricare la pagina ogni volta.

La nuova versione di Chrome Developer mostra da dove viene ereditata.

Sto rispondendo a lungo dopo che la domanda ha già molte risposte corrette perché ho riscontrato un caso diverso in cui un blocco di codice CSS è disattivato e non modificabile in Chome DevTools: Il blocco in questione conteneva caratteri U + 200B ZERO WIDTH SPACE . Una volta trovati e rimossi, ho potuto modificare nuovamente il blocco in Chrome DevTools. Presumibilmente questo potrebbe accadere anche con altri personaggi non ascii, non ho provato a capirlo.