これはなぜ "！important"でのみ機能するのですか？

Question

私はこのコードを持っており、!important（これは決してそれを使わない方法があることを知っているので、私は使用したくありません）なしでは動作しません。

興味深いのは、CSSのラインが他のすべての後にある（と私の知る限り、これは他のものを上書きしなければならない）ということである

ライブデモjsFiddle

HTMLの構造：

<div id="body"> 
    <div class="box"> 
     <p>...</p> 
    </div> 
    <p>...</p> 
</div> 

CSS：

#body{ 
    padding:18px 35px; 
} 

#body p{ 
    margin-bottom:18px; 
} 

.box{ 
    background:#ddd; 
    border:1px solid #000; 
    padding:5px; 
} 

.box p{ 
    margin:0;/*works with !important*/ 
} 

Answer 1

#body pのIDが.box pのクラスよりも具体的なセレクタであるためです。重要なのはそのカスケードを単純に上書きします。

Answer 2

#bodyとpのマッチングは、.boxとpのマッチングよりも高い特異性を持っています。 CSSの仕様のspecificity sectionを読んでください。試してみてください

#header .box p { margin: 0; } 

#headerと.boxの間のスペースは重要です。

Answer 3

あなたの#body pは、より高い特異性値を持っています。一般的に、特異性値の計算方法については、hereを読むことができます。