0

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

看到这个小提琴:

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

#Navigation .stretch {
...
}

所以它变成:

.stretch {
...
}

为什么浏览器(chrome 版本 26.0.1410.64 m)忽略此规则?

我也在firefox上测试过。

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

谢谢

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

4

3 回答 3

1

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

于 2013-05-11T13:09:03.793 回答
1

它不会被忽略,它会被否决,#Navigation li因为该选择器更具体。它设置displayinline(而不是您的预期inline block)。

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

于 2013-05-11T13:10:24.953 回答
1

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

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

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

于 2013-05-11T13:11:22.980 回答