[解決済み】Chromeの要素インスペクタでCSSルールがグレーアウトしているのはどういう意味ですか？

質問

を検査しています。 h2 要素に適用されているはずのCSSルールの一部がグレーアウトしています。 取り消し線はルールが上書きされたことを示すようですが、スタイルがグレーアウトしているのはどういう意味でしょうか？

解決方法は？

私にとっては、現在の回答は問題を十分に説明していなかったので、この回答が他の人にとって有用であることを期待して追加します。

テキストがグレーになっている場合、次のような意味があります。 どちらか

1. ブラウザが適用するデフォルトのルール/プロパティであり、デフォルトのショートハンドプロパティも含まれます。
2. もう少し複雑な継承を含んでいます。

継承

注: Chrome dev tools の "style" パネルにルール セットが表示されるのは、現在選択されている DOM ノードにルール セット内の 1 つまたは複数のルールが適用されているからです。 完全性を保つために、dev tools はそのセットのすべてのルールを、それらが適用されているかどうかにかかわらず、表示すると推測されます。

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

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

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

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

記事より抜粋

この[継承シナリオ]は、時折、ちょっとした混乱を引き起こすことがあります。 図21は、デフォルトのショートハンドプロパティを示しています。 のプロパティと、継承されない プロパティがあります。を見るときに、その文脈を意識してください。 要素を検討します。