web-dev-qa-db-ja.com

CSS継承ソースを検出する方法は？

これまでのところ、プロパティが継承されているかどうかしかわかりませんが、継承のソースを知る必要があります（たとえば、どのCSSファイルが最終値を引き起こしたのですか？）これは可能ですか？

このための便利なツールはありますか？

[〜＃〜]編集[〜＃〜]

これが私が得たものですchrome計算されたスタイル（継承を表示）方向プロパティを参照してください、その継承ソースについての情報はありません enter image description here

cssgoogle-chromefirebuggoogle-chrome-devtools
19
simo

FirefoxまたはChromeの開発者ツールでFirebugを使用すると、この作業を非常に簡単に行うことができます。

Chromeデベロッパーツール

下の画像のように。

enter image description here

詳細については、チェックしてください Chromeデベロッパーツール：ここの要素スタイル

Firebugで

下の画像のように。

enter image description here

詳細については、チェックしてください CSS開発はこちら

インストールできます Fire Bug From Here

アップデート1：

以下のChromeのShow Inheritedパネルのcomputed styleチェックボックスをクリックするだけで見つけることができます。

enter image description here

アップデート2：

Firebugでは、下の画像に示した継承要素をクリックするだけで、関連する継承要素の場所に移動します。

P.S。-chromeツールを使用しても同じことができます。

enter image description here

10
Sampath

CSSのカスケードの性質により、 [要素]タブ のスタイルブラウザは非常に便利です。個々のスタイルとその由来を確認できます。また、計算して適用した後のスタイルの最終セットも確認​​できます。要素に。

enter image description here

編集

計算されたスタイルパネルからプロパティとそのソースを参照できます

enter image description here

参照

2
Sudarshan