CSS级联优先级答案

【问题标题】：CSS cascading priorityCSS级联优先级
【发布时间】：2011-06-07 10:46:37
【问题描述】：

我有这个我正在尝试设置样式的 HTML：

<div id="menubar">
    <menu id="menubarTransportControls">Foobar</menu>
</div>

谁能解释为什么这个 CSS...

#menubar menu {
    width: auto;
}

...优先于...

#menubarTransportControls {
    width: 100%;
}

我正在使用带有 HTML5 shiv javascript 的 IE7。谢谢

【问题讨论】：

你有没有把css for menu稍后放到id上？你可以尝试撤销声明吗？
@sudimail: Just for your information: the order only matters when selectors have equal specificity, which is not the case here.

【解决方案1】：

#menubar menu 的特异性高于#menubarTransportControls。

要了解特异性：

如果您愿意，可以使用此计算器：

Selector                    Score (a,b,c,d)
#menubar menu               0,1,0,1
#menubarTransportControls   0,1,0,0

请务必阅读上述一些资源以了解“分数”的含义。

【讨论】：

【解决方案2】：

因为#menubar menu 比#menubarTransportControls 更具体

【讨论】：

【解决方案3】：

这都是关于修道院的。在 css 中，id 比 class & element 更强大，例如

id=100

class=10
element=1

所以在你的例子中：

#menubar menu = 100 + 1 = 101

#menubarTransportControls = 100 = 100

所以哪一个更强大。更多信息请查看http://code.google.com/edu/submissions/html-css-javascript/（CSS 演示）

【讨论】：

不会投反对票，因为答案是特异性，概念就在这里，但特异性并不像添加数字那么简单，（尽管除非你有超过选择器中的 9 个元素会起作用）- 请参阅 @thirtydot's answer - 在您之前发布以了解计算它的正确方法
我只是描述了 radbourm3 的要求，更多信息我提供了链接。

【解决方案4】：

#menubar menu 直接调用menu 标签，所以它优先。

【讨论】：