Chromeの要素インスペクターでCSSルールがグレーアウトされているとはどういう意味ですか？
Google Chromeの要素インスペクターを使用してWebページ上のh2要素を検査していますが、CSSルールの一部（適用されているように見える）はグレー表示されています。取り消し線はルールが上書きされたことを示しているようですが、スタイルがグレーアウトされている場合はどういう意味ですか？
私にとっては、現在の回答では問題を十分に説明できなかったため、他の人にも役立つと思われるこの回答を追加しています。
テキストのグレー表示/淡色表示は、eitherを意味します
- これはブラウザが適用するデフォルトのルール/プロパティであり、デフォルトの短縮プロパティが含まれています。
- それは少し複雑な継承を伴います。
継承
注：セットの1つ以上のルールが現在選択されているDOMノードに適用されているため、Chrome devツールの「スタイル」パネルにルールセットが表示されます。完全を期すために、devツールは、適用されるかどうかに関係なく、そのセットのすべてのルールを表示すると思います。
継承のために現在選択されている要素にルールが適用される場合（つまり、ルールが祖先に適用され、選択された要素が継承した場合）、chromeは再びルールセット全体を表示します。
現在選択されている要素に適用されるルールは、通常のテキストで表示されます。
ルールがそのセットに存在するが、継承できないプロパティ（背景色など）であるために適用されない場合、グレー/淡色表示のテキストとして表示されます。
ここに良い説明を与える記事があります 注：関連項目は記事の下部にあります-図21-残念ながら関連セクションには見出しがありません）----（http://commandlinefanatic.com /cgi-bin/showarticle.cgi?article=art0
記事からの抜粋
この[継承シナリオ]は、省略された速記のプロパティがあるため、混乱を招く場合があります。図21は、フォントプロパティのデフォルトの短縮プロパティと、継承されていないプロパティを示しています。要素を調べるときは、見ているコンテキストに注意してください。
これは、ルールが継承されているが、選択した要素には適用できないことを意味します。
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
このペインには、選択した要素に直接適用可能なルールのプロパティのみが含まれます。継承されたプロパティをさらに表示するには、Show inheritedチェックボックスを有効にします。 このようなプロパティは淡色表示のフォントで表示されます。
ライブの例：「Hello、world！」というテキストを含む要素を調べます
div {
margin: 0;
}
div#foo {
margin-top: 10px;
}<div id="foo">Hello, world!</div>マイケル・コールマンが正解です。単純な画像を追加して、それに合わせたいだけです。彼が含めたリンクには、次の簡単な例があります。 http://commandlinefanatic.com/art033ex4.html
HTML/DOMは次のようになります...
P要素を選択すると、Chromeのスタイルペインは次のようになります...
ご覧のとおり、p要素はその祖先（div）を継承しています。では、なぜスタイルbackground-color: blueがグレーアウトされているのでしょうか？継承可能なスタイルが少なくとも1つあるルールセットの一部だからです。その継承可能なスタイルはtext-indent: 1emです
background-color:blueは継承できませんが、継承可能なtext-indent: 1emを含むルールセットの一部であり、Chromeの開発者はルールセットを表示するときに完成させたいと考えていました。ただし、ルールセット内の継承可能なスタイルとそうでないスタイルを区別するために、継承できないスタイルはグレー表示されます。
これは、インスペクターからスタイルを追加した場合にも発生しますが、その新しいスタイルは選択した要素には適用されません。通常、表示されるスタイルは選択した要素のスタイルのみであるため、グレーは、追加したスタイルがDOMナビゲーターにフォーカスがある要素を選択していないことを示しています。
ルールがより高い優先度を持つ別のルールに置き換えられたことを意味します。以下のスタイルシートの例：
h2 {
color: red;
}
h2 {
color: blue;
}
インスペクターには、ルールがcolor:red;グレー表示され、color:blue;が通常表示されます。
CSS inheritance を読んで、どのルールが継承されるか、またはより高い優先度を持つかを学習します。
編集：
混同：灰色表示のルールは未設定のルールであり、all要素に適用される特別なデフォルトのスタイルシートを使用します（すべてのスタイルは価値）。
Webpackを使用する場合、ソースコードで変更されたcssルールまたはプロパティは、再構築後にページがリロードされるとグレー表示されます。これは本当に面倒で、毎回ページをリロードしなければなりませんでした。
Chome DevToolsでCSSコードのブロックがグレーアウトされて編集できないという別のケースに遭遇したため、質問にはすでに多くの正しい答えがありますが、問題のブロックには + 200B ZERO WIDTH SPACE文字 。それらを見つけて削除したら、Chrome DevToolsでブロックを再度編集できます。おそらくこれは他の非ASCII文字でも起こるかもしれないので、私はそれを理解しようとしませんでした。
chrome開発者の新しいバージョンは、継承元を示しています。