css - 浏览器跳过了 CSS 规则

Question

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

看到这个小提琴：

#Navigation在此处的 CSS 声明中删除：

#Navigation .stretch {
...
}

所以它变成：

.stretch {
...
}

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

我也在firefox上测试过。

可能这不是 CSS 优先级问题，因为 DevTools 和 FireBug 都没有完全显示它。甚至没有被覆盖。

谢谢

编辑：非常感谢伙计们！我以前看不到那些交叉的规则，我在 devTools 和 fireBug 中滚动了几次，并解决了一个多小时的悲惨“简单”问题。

Answer 1

仅使用.stretchselector 定义的规则比 更具体#navigator li，即使稍后在级联中定义它也不会应用。因此显示将永远inline

Answer 2

它不会被忽略，它会被否决，#Navigation li因为该选择器更具体。它设置display为inline（而不是您的预期inline block）。

当您在 Chrome 中“检查元素”时，您可以轻松发现这一点。它显示元素的样式，并划掉被否决的样式。

Answer 3

问题在于它#Navigation li具有更高的特异性，.stretch因为它包含一个id选择器。

您看不到它的原因是因为它是空的，并且您很可能选择了前一个元素（在 jsfiddle 代码上）。

如果您li从萤火虫中选择空的，则表明它已被覆盖。