浏览器跳过css规则

Question

好吧，这可能看起来像另一个愚蠢的问题，但我找不到答案。

请参阅this小提琴：

在CSS声明中删除#Navigation：

#Navigation .stretch {
...
}

所以它变成了：

.stretch {
...
}

为什么浏览器（chrome版本26.0.1410.64 m）会忽略此规则？

我也在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选择器。

您没有看到它的原因是因为它是空的，您很可能选择前一个元素（ on jsfiddle code ）。

如果您从firebug中选择空li，则表示它已被覆盖。