Chrome DevTools を使用したオーバーライド CSS ルールの特定
Chrome の開発者ツールを使用して CSS スタイルを調査すると、スタイルがオーバーライドとしてマークされる状況が発生することがあります。それをオーバーライドする特定のルールを特定するには、次の手順に従います。
-
要素インスペクターを開きます。 検査するスタイルの要素を選択します。右クリックして「要素の検査」を選択するか、「Ctrl Shift C」キーボード ショートカットを使用します。
-
計算スタイル パネルを見つけます。 インスペクターの右側のパネルで、 [計算済み] タブ。
-
プロパティを展開します: オーバーライドされる CSS プロパティを特定します。プロパティ名の横にある矢印をクリックして展開します。
-
該当するルールを確認します: 展開されたプロパティには、オーバーライドされたルールを含む、要素に適用されるすべての CSS ルールのリストが表示されます。 rules.
-
勝ったルールを特定します: 現在最も詳細なルール (CSS カスケードに基づく) が強調表示され、「勝った」ルールとしてマークされます。
例:
CSS プロパティ「color」がオーバーライドされている場合、要素の「color」プロパティを定義するすべてのルールのリストが表示されます。最も高い特異性を持つ「勝利」ルールには、太字のフォントと濃い緑色のチェックマークが付きます。
以上がChrome DevTools で上書きする CSS ルールを特定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。