Chromeの要素インスペクターでCSSルールがグレー表示されているとはどういう意味ですか？

私は検査てるh2適用されるように見える- -グレー表示されているGoogle Chromeの要素インスペクタとCSSルールの一部を使用してWebページ上の要素を。取り消し線はルールがオーバーライドされたことを示しているようですが、スタイルがグレー表示されている場合はどういう意味ですか？

私にとって、現在の回答は問題を十分に説明していなかったので、うまくいけば他の人に役立つかもしれないこの回答を追加します。

灰色/淡色表示のテキストは、次のいずれかを意味します

1. これは、ブラウザが適用するデフォルトのルール/プロパティであり、デフォルトの省略形プロパティが含まれています。
2. それは少し複雑な継承を伴います。

継承

注：現在選択されているDOMノードにセットの1つ以上のルールが適用されているため、Chrome開発ツールの「スタイル」パネルにルールセットが表示されます。完全を期すために、開発ツールは、適用されているかどうかに関係なく、そのセットのすべてのルールを表示すると思います。

継承のために現在選択されている要素にルールが適用された場合（つまり、ルールが祖先に適用され、選択された要素がそれを継承した場合）、Chromeは再びルールセット全体を表示します。

現在選択されている要素に適用されるルールは、通常のテキストで表示されます。

ルールがそのセットに存在するが、それが継承できないプロパティ（たとえば、背景色）であるために適用されない場合、そのルールは灰色または淡色表示されたテキストとして表示されます。

ここに良い説明を与える記事があります-（注：関連する項目は記事の下部にあります-図21-残念ながら、関連するセクションには見出しがありません）-http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

記事からの抜粋

この[継承シナリオ]は、デフォルトの省略形プロパティであるため、場合によっては少し混乱を招くことがあります。図21は、フォントプロパティのデフォルトの簡略プロパティと非継承プロパティを示しています。要素を調べるときに見ているコンテキストに注意してください。

これは、ルールが継承されているが、選択した要素には適用できないことを意味します。

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

このペインには、選択した要素に直接適用できるルールのプロパティのみが含まれています。継承されたプロパティをさらに表示するには、[継承を表示]チェックボックスをオンにします。このようなプロパティは淡色表示されたフォントで表示されます。

実例：「Hello、world！」というテキストを含む要素を調べます

div { 
  margin: 0;
}

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

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

マイケル・コールマンは正しい答えを持っています。それに合わせて簡単な画像を追加したいだけです。彼が含めたリンクには、次の簡単な例があります。http：//commandlinefanatic.com/art033ex4.html

HTML / DOMは次のようになります...

Chromeのスタイルペインは、p要素を選択すると次のようになります...

ご覧のとおり、p要素はその祖先（div）を継承しています。では、なぜスタイルがbackground-color: blueグレー表示されるのですか？継承可能なスタイルが少なくとも1つあるルールセットの一部だからです。その継承可能なスタイルはtext-indent: 1em

background-color:blueは継承可能ではありませんが、継承可能なものを含むルールセットの一部であり、text-indent: 1emChromeの開発者はルールセットを表示するときに完全なものにしたいと考えました。ただし、継承できないスタイルから継承可能なルールセットのスタイルを区別するために、継承できないスタイルはグレー表示されます。

これは、インスペクターを介してスタイルを追加した場合にも発生しますが、その新しいスタイルは、選択した要素には適用されません。通常、表示されるスタイルは選択した要素のスタイルのみであるため、灰色は、追加したばかりのスタイルが、DOMナビゲーターでフォーカスされている要素を選択していないことを示します。

これは、ルールが優先度の高い別のルールに置き換えられたことを意味します。たとえば、次のスタイルシート：

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

インスペクターは、規則をcolor:red;灰色にしてcolor:blue;通常表示します。

CSSの継承について読んで、どのルールが継承されるか、より高い優先度を持つかを確認します。

編集：

Mixup：グレー表示のルールは未設定のルールで、すべての要素に適用される特別なデフォルトのスタイルシートを使用します（すべてのスタイルに値が必要なため、要素をレンダリング可能にするルール）。

webpackを使用している場合、再構築後にページがリロードされると、ソースコードで変更されたcssルールまたはプロパティがグレー表示されます。これは本当に煩わしく、毎回ページをリロードする必要がありました。

新しいバージョンのchrome開発者は、継承元を示しています。

Chome DevToolsでCSSコードのブロックが灰色になって編集できないという別のケースに遭遇したため、質問にすでに多くの正解があった後、私はずっと答えています。問題のブロックにはU + 200B ZERO WIDTH SPACE文字が含まれていました。それらを見つけて削除したら、Chrome DevToolsでブロックを再度編集できます。これはおそらく他の非ASCII文字でも発生する可能性があります。私はそれを理解しようとしませんでした。