CSS cascading priority

I've got this HTML that I'm trying to style:

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

Can anyone explain wh开发者_开发问答y this CSS...

#menubar menu {
    width: auto;
}

...takes priority over...

#menubarTransportControls {
    width: 100%;
}

I'm using IE7 with the HTML5 shiv javascript. Thanks

---

#menubar menu has higher specificity than #menubarTransportControls.

To understand specificity:

• The specs: http://www.w3.org/TR/CSS21/cascade.html#specificity
• If you like Star Wars: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
• Otherwise: http://css-tricks.com/specifics-on-css-specificity/

You can use this calculator if you like:

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

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

Be sure to read some of the above resources to understand what the "Score" means.

---

Because #menubar menu is more specific than #menubarTransportControls

See for more info http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

---

it's all about the priory. In css id is more powerful then class & element for example

id=100

class=10
element=1

so in your example :

#menubar menu = 100 + 1 = 101

&

#menubarTransportControls = 100 = 100 

so which one is more powreful. for more check this http://code.google.com/edu/submissions/html-css-javascript/ (CSS Presentation)

---

#menubar menu is calling directly the menu tag so it takes priority.