1. ホーム
  2. css

[解決済み】Google Chrome devtoolsのクロスしたスタイルプロパティの意味は何ですか?

2022-03-28 21:46:07

質問

Chromeのdevtoolsで要素を検査する際、要素タブの右側の「スタイル」バーに、対応するCSSプロパティが表示されます。このとき、いくつかのプロパティに取り消し線が表示されることがあります。これらのプロパティは何を意味するのでしょうか?

解決するには?

CSS プロパティが取り消し線付きで表示される場合、取り消し線付きのスタイルが適用された後、より特定のセレクタ、よりローカルなルール、または同じルール内の後続のプロパティによって上書きされたことを意味します。

(特殊なケースとして、マッチング ルール内にスタイルが存在するがコメント アウトされている場合、または Chrome 開発者ツールでチェックを外して手動で無効にしている場合も、スタイルが取り消し線付きで表示されます)。また、スタイルに構文エラーがある場合は、エラー アイコンが表示され、取り消し線が表示されます)。

例えば、背景色をすべての div には別の背景色が適用されました。 div のプロパティリストでは、最初の色は表示されますが、2 番目の色がそれに取って代わるため、消されます (ある ID の div をそのidで指定します)。