CSS级联优先级

Question

我有这个HTML，我正在尝试风格：

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

任何人都可以解释为什么这个CSS ...

#menubar menu {
    width: auto;
}

......优先于......

#menubarTransportControls {
    width: 100%;
}

我正在使用IE7和HTML5 shiv javascript。感谢

Answer 1

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

了解特异性：

• 规格：http://www.w3.org/TR/CSS21/cascade.html#specificity
• 如果你喜欢星球大战：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
• 否则：http://css-tricks.com/specifics-on-css-specificity/

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

http://www.suzyit.com/tools/specificity.php

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

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

Answer 2

因为#menubar menu比#menubarTransportControls

更具体

有关详情，请参阅http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 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演示文稿）

Answer 4

#menubar menu直接调用menu代码，因此优先。