CSS级联优先级

Question

我有这个HTML,我正在尝试样式:

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

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

#menubar menu {
    width: auto;
}

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

#menubarTransportControls {
    width: 100%;
}

我正在使用IE5与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

请务必阅读上述一些资源,以了解"分数"的含义.