Chrome DevTools で一部の CSS プロパティに取り消し線が引かれているのはなぜですか?

Chrome DevTools の CSS プロパティに取り消し線が表示される: 理由を明らかにする

Chrome の開発ツールで HTML 要素を検査すると、取り消し線が表示される場合があります「スタイル」ペインの CSS プロパティ。これらの取り消し線のプロパティは、要素のスタイルを明らかにする特定の動作を示します。

取り消し線のプロパティの意味

取り消し線のプロパティは、基礎となるスタイルが最初は適用されましたが、その後、より具体的なセレクター、よりローカルなルール、または同じルール内の後のプロパティによってオーバーライドされました。この動作は、CSS ルールが特異性と優先順位の順に適用されるために発生します。

特殊なケース

前述の理由に加えて、取り消し線の付いたプロパティは、次の特殊なケース:

• コメントアウトされたスタイル: 一致ルール内に存在するがコメント化されているスタイル。
• 手動で無効化されたスタイル: Chrome デベロッパー ツール内でチェックを外して手動で無効にされたスタイル。
• 構文エラー: 構文エラーを含むスタイル。取り消し線の付いたテキストの横にエラー アイコンが表示されます。 .

例

次の例を考えてみましょう:

<code class="html"><div id="my-div"></div></code>

<code class="css">/* Initially, all divs have a white background. */
div {
  background-color: white;
}

/* However, this rule overrides the previous one for divs with id "my-div". */
#my-div {
  background-color: blue;
}</code>

Chrome devtools で、「my-div」を検査します。 " 要素には、"background-color:white" の取り消し線が表示されます。これは、最初の白い背景色が、ID「my-div」の div に指定された後続の青い背景色によってオーバーライドされたことを示します。

以上がChrome DevTools で一部の CSS プロパティに取り消し線が引かれているのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。