Chrome DevTools でスタイルをオーバーライドする特定の CSS ルールを見つけるにはどうすればよいですか?

Chrome デベロッパー ツールでオーバーライドする CSS ルールを明らかにする

Chrome デベロッパー ツールで Web 要素を検査すると、オーバーライドされたスタイルが明らかになります。ただし、このようなオーバーライドの原因となるルールを見つけるのは少し難しい場合があります。ただし、Chrome にはこの問題を解決する賢いメカニズムが用意されているため、心配する必要はありません。

オーバーライド スタイル ルールの公開

オーバーライド ルールを追跡するには、Computed Style パネル。興味のある特定のスタイル プロパティを展開します。適用可能なすべての CSS ルールのリストが表示され、観察されたスタイルのオーバーライドを担当する勝利者が示されます。

例として、オーバーライドされた「font-size」プロパティを持つ要素を調べてみましょう。 [計算されたスタイル] パネルでこのプロパティを展開すると、次のような結果が得られます。

font-size: 16px;
   - overridden by <link href="style2.css" rel="stylesheet"> line 10
   - origin: <inline style>

これは、元の "font-size" 値がインラインで設定されているが、オーバーライドは "style2.css" から来ていることを示しています。 10 行目。とても簡単です!

以上がChrome DevTools でスタイルをオーバーライドする特定の CSS ルールを見つけるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。