爲什麼這隻適用於「！重要」？

我有這段代碼，它拒絕工作沒有!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*/ 
}

來源

2012-01-12 ajax333221

我設法通過在'.box p'之前添加'＃body'來實現它，這些東西讓我覺得我永遠不會掌握CSS ...... – ajax333221 2012-01-12 05:40:24

這是因爲#body p的ID是一個比.box p類更具體的選擇器。重要的是簡單地覆蓋了級聯。

來源

2012-01-12 05:38:47

所以你說的CSS是這樣解析的：以最不特定/最具體的方式執行CSS（當兩個或多個人共享完全相同的路徑時，順序無關緊要（然後順序會很重要嗎？） – ajax333221 2012-01-12 05:46:39

只有當它們在特異性上相當時，順序才重要。 .class {color：red;} .class {color：blue;}是順序依賴的。 – 2012-01-12 05:49:42

使用#body匹配p比使用.box匹配p具有更高的特異性。閱讀CSS規範的specificity section以獲取幫助。嘗試

#header .box p { margin: 0; }

#header和.box之間的空格很重要。

來源

2012-01-12 05:44:32 MtnViewJohn

您的#body p具有更高的特異性值。您可以詳細瞭解如何計算特異性值here。

來源

2012-01-12 05:45:11 Ktash

爲什麼這隻適用於「！重要」？

回答

相關問題