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，则表明它被覆盖。