47

私は長い間 Chrome を使用してきましたが、スタイル パネルで色あせた CSS 定義に出くわしたことはありません (思い出すことはできません)。セレクターは他の場所で定義されていません。

例：

ここに画像の説明を入力

（編集：明確にするために、私はユーザーエージェントスタイルシートについて言及していません）

なぜ色あせているのか、これが何を意味するのかわかりません。定義は編集可能に見えますが、値の変更は保持されず (つまり、クリックするとすぐに元の値に戻ります)、Web ページには影響しません。

ツールのドキュメントでこれに関する参照が見つかりませんでした。あなたの親切な人々の中で、これについて何か光を当てることができますか?

4

4 に答える 4

15

「色あせた」スタイルは、選択したタグに適用されていないスタイルです。したがって、スクリーンショットには、h1通常の色のルール (選択した要素に適用されるルール) と、選択した要素に適用されていない.SubHeader h1ルールがあります。

CSS ルール (Chrome 開発ツールの [+] ボタン) を動的に追加し、セレクターを変更して、選択したどの要素にも適用されないようにすると、これが表示されることがあります。

于 2012-10-08T15:06:13.493 に答える
14

フェードされたルールは要素に適用されません。

この例を見てください 

<!-- HTML -->
<div>
  <span>Test</span>
</div>

/* CSS */
div {
  color: #F0F;
  margin: 15px;
  stroke: #FFF;
  float: left;
}

開発ツールを開くと、marginとfloatが薄れcolorていることに気付くでしょうstroke。これは、spanelement がその親からスタイル ルールを継承したためですが、colorおよびstroke ルールのみ継承可能です。

開発ツール

于 2018-06-05T09:06:32.937 に答える
8

これは、ルールが継承されたことを意味します。

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

于 2014-03-15T18:20:31.053 に答える
4

これらは、ブラウザによって自動的に適用されるスタイルシートです。

これは、次の説明で確認できますuser agent stylesheets。

右下隅の設定で をチェックして、これを無効にすることができますShow user agent styles。これで、スタイルは CSS パネルに表示されなくなります (ただし、まだ適用されています!)

編集：

私はあなたの質問を読み違えました。開発ドキュメントは、淡色表示されたルールについて次のように述べています。

注: 選択した要素と一致しないようにセレクターを編集すると、ルールが淡色表示になり、明らかに要素に適用されません。これを行う必要はほとんどありません。

あなたのスクリーンショットは、これが事実だったように見えます。

于 2012-10-08T14:41:42.827 に答える