web-dev-qa-db-ja.com

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

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

cssgoogle-chromegoogle-chrome-devtools
244
rohitmishra

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

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

たとえば、すべてのdivsに背景色が適用されていて、特定のIDを持つdivsに別の背景色が適用された場合、最初の色は表示されますが、2番目として消されます色がそれを置き換えました（divのプロパティリストでそのIDを使用）。

287
Jacob Mattison

サイドノートに。 @ mediaクエリ（@media screen (max-width:500pxなど）を使用している場合は、@ mediaクエリの適用に特に注意してくださいAFTERこれで通常のスタイルで完了です。同じ要素を操作する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 **
11
sanjihan

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

背景画像を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にbackground-sizeが表示されます。これがなぜなのかはわかりませんが、それを台無しにしたくありません。

9
Rishul Matta

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

6
Nanda