css規則跳過瀏覽器

Question

好吧，這可能看起來像另一個愚蠢的問題，但我無法找到答案。

見this小提琴：

#Navigation .stretch { 
... 
} 

，使其成爲：

在CSS聲明這裏刪除#Navigation

.stretch { 
... 
} 

爲什麼瀏覽器（Chrome版本26.0.1410.64米）忽略這條規則？

我已經在Firefox上測試過。

也許它不是CSS優先級問題，因爲DevTools都不會完全顯示FireBug。甚至沒有超過。

謝謝

編輯：非常感謝的傢伙！我之前幾乎看不到那些交叉規則，在devTools和fireBug中滾動幾次，並且在一個多小時內解決了這樣一個難以理解的「簡單」問題。

Answer 1

僅用.stretch選擇器定義的規則不如#navigator li特定，即使稍後在級聯上定義它也不適用。因此顯示將永遠是inline

Answer 2

它不會被忽略，它被#Navigation li否決，因爲該選擇器更具體。它將display設置爲inline（而不是您想要的inline block）。

當您在Chrome中檢查元素時，您可以很容易地發現這一點。它顯示了元素的樣式，並將被忽略的樣式分開。

Answer 3

問題是#Navigation li比.stretch具有更高的特異性，因爲它包含一個id選擇器。

你沒有看到它的原因是因爲它是空的，你很可能選擇上一個元素（在jsfiddle代碼）。

如果您從螢火蟲中選擇空的li，則表明它被覆蓋。