Google Chrome開発ツールのクロススタイルプロパティはどういう意味ですか？

Chromeの開発ツールを使用して要素を検査しているとき、要素タブの右側の「スタイル」バーには、対応するCSSプロパティが表示されます。時には、これらのプロパティのいくつかは取り消し線が引かれています。これらのプロパティはどういう意味ですか？

CSSプロパティが取り消し線として表示される場合、取り消し線が適用されたが、より具体的なセレクター、よりローカルなルール、または同じルール内の後のプロパティによってオーバーライドされたことを意味します。

（特殊なケース：一致するルールにスタイルが存在するが、コメントアウトされている場合、またはChromeデベロッパーツールでチェックボックスをオフにして手動で無効にした場合、スタイルは取り消し線としても表示されます。また、クロスとして表示されますアウト、ただしスタイルに構文エラーがある場合はエラーアイコン付き）

たとえば、背景色がすべてdivのに適用されたdivが、特定のIDを持つsに異なる背景色が適用された場合、最初の色が表示されますが、2番目の色がそれを置き換えたため、取り消し線が引かれます（プロパティ内）divそのIDを持つのリスト）。

余談です。使用している場合は@mediaのクエリを（など@media screen (max-width:500px））@mediaクエリを適用するに特に注意を払うAFTERあなたが通常のスタイルで行われます。@mediaクエリは、同じ要素を操作するcssが後に続く場合、（より具体的であっても）取り消されるためです。例：

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **

上記の回答に加えて、私が本当に驚いたのは、取り消された資産のケースを強調することです。

divに背景画像を追加する場合：

<div class = "myBackground">

</div>

divのサイズに合うように画像をスケーリングしたいので、これが通常のクラス定義になります。

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

しかし、次のように順序を入れ替えると：-

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

クロームでは、背景のサイズが取り消し線で表示されます。これがなぜなのかはわかりませんが、うんざりしたくありません。

打線表示を取得した後でもスタイルを適用したい場合は、を使用"!important"してスタイルを強制できます。それは正しい解決策ではないかもしれませんが、問題を解決します。

CSSコードをコピーしてどこかに貼り付けると、フォーマットが壊れてChromeに黄色の警告が表示される場合があります。CSSコードを再フォーマットしてみてください。問題はありません。