Google Chrome の要素インスペクタを使用して Web ページ上の要素を検査しているのですh2が、適用されているように見える CSS ルールの一部がグレー表示されています。取り消し線はルールが上書きされたことを示しているようですが、スタイルがグレー表示されている場合、それは何を意味するのでしょうか。
ベストアンサー1
私にとって、現在の回答では問題が十分に説明されていなかったので、他の人にも役立つかもしれないこの回答を追加します。
灰色/淡色表示のテキストは、次のいずれかを意味します。
- これはブラウザが適用するデフォルトのルール/プロパティであり、デフォルトの短縮プロパティが含まれます。
- 継承が関係しますが、これは少し複雑です。
継承
注: Chrome 開発ツールの「スタイル」パネルにはルール セットが表示されます。これは、セット内の 1 つ以上のルールが現在選択されている DOM ノードに適用されているためです。完全性を期すため、開発ツールには、適用されているかどうかに関係なく、そのセットのすべてのルールが表示されると思います。
継承により現在選択されている要素にルールが適用されている場合 (つまり、ルールが祖先に適用され、選択された要素がそれを継承した場合)、Chrome はルールセット全体を再度表示します。
現在選択されている要素に適用されているルールが通常のテキストで表示されます。
そのセット内にルールが存在するが、継承できないプロパティ (背景色など) であるため適用されていない場合は、グレー表示または淡色表示されたテキストとして表示されます。
ここに良い説明をしている記事があります - (注: 関連項目は記事の下部にあります - 図 21 - 残念ながら関連セクションには見出しがありません) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
記事からの抜粋
この [継承シナリオ] では、デフォルトのショートハンド プロパティが原因で、多少の混乱が生じることがあります。図 21 は、フォント プロパティのデフォルトのショートハンド プロパティと、継承されていないプロパティを示しています。要素を調べるときは、見ているコンテキストに注意してください。