Google Chrome Devtoolsの交差スタイルのプロパティはどういう意味ですか？

Question

ChromeのDevToolsを使用して要素を検査している間、[要素]タブで、右側の「スタイル」バーには、対応するCSSプロパティが表示されます。時には、これらのプロパティのいくつかは貫通されます。これらのプロパティとはどういう意味ですか？

Answer 1

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

（特別なケース：スタイルが一致するルールに存在するがコメントアウトされている場合、またはChrome開発者ツール内でチェックすることで手動で無効にした場合、スタイルはストライクスルーとして表示されます。また、交差して表示されます。 outですが、エラーアイコンがあり、スタイルに構文エラーがある場合。）

たとえば、背景色がすべてに適用された場合 divsですが、別の背景色が適用されました divs特定のIDを使用して、最初の色が表示されますが、2番目の色がそれを置き換えたため、取り消されます（ div そのIDで）。

Answer 2

サイドノート。使用している場合 @メディア クエリ（など @media screen (max-width:500px））@Mediaクエリの適用に特に注意してください 後 あなたは通常のスタイルで終わります。 @mediaクエリは、同じ要素を操作するCSSが続くと、@mediaクエリが処理されるためです。例：

@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 **

Answer 3

上記の回答に加えて、私は本当に驚いた財産を奪われたケースを強調したいと思います。

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; 
}

その後、Chromeで表示されます バックグラウンドサイズ strikedしたように。なぜこれがなぜなのかわかりませんが、ええ、あなたはそれを台無しにしたくありません。

Answer 4

Strugh-Troughの表示を取得した後でもスタイルを適用したい場合は、使用できます "!important" スタイルを実施する。それは正しい解決策ではないかもしれませんが、問題を解決します。

Answer 5

CSSコードをどこかにコピーして貼り付けると、形式が破損する場合がある場合があります。 CSSコードをもう一度再度再フォーマットするようにする必要があります。問題ありません。