282

h2Google Chrome の要素インスペクターを使用して Web ページの要素を調べていますが、適用されているように見える CSS ルールの一部がグレー表示されています。取り消し線はルールが上書きされたことを示しているようですが、スタイルがグレー表示されている場合はどういう意味ですか?

4

8 に答える 8

85

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

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>

于 2011-06-14T23:29:47.363 に答える
34

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

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

HTML

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

スタイル ペイン

ご覧のとおり、p 要素はその祖先 (div) から継承しています。では、なぜスタイルがbackground-color: blue灰色になっているのでしょうか。継承可能なスタイルが少なくとも 1 つあるルールセットの一部であるためです。その継承可能なスタイルはtext-indent: 1em

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

于 2015-08-27T21:07:29.223 に答える
5

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

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

インスペクターには、ルールがcolor:red;グレー表示され、color:blue;通常どおりに表示されます。

どのルールが継承され、優先度が高いかについては、 CSS の継承を参照してください。

編集：

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

于 2010-07-16T14:01:01.970 に答える
0

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

于 2016-08-01T11:27:33.020 に答える