CSS каскадный приоритет

Question

У меня есть этот HTML, который я пытаюсь стилизовать:

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

Может кто-нибудь объяснить, почему этот CSS ...

#menubar menu {
    width: auto;
}

... имеет приоритет над...

#menubarTransportControls {
    width: 100%;
}

Я использую IE7 с javascript HTML5 shiv.Спасибо

Answer 1

#menubar menu имеет более высокую специфичность, чем #menubarTransportControls.

Чтобы понять специфику:

• Характеристики: http://www.w3.org/TR/CSS21/cascade.html#specificity
• Если вам нравятся Star Wars: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
• В противном случае: http://css -tricks.com / specics-on-css-специфичность /

Вы можете использовать этот калькулятор, если вынапример:

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

это все о монастыре.В 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 3

Поскольку #menubar menu является более конкретным, чем #menubarTransportControls

См. Дополнительную информацию http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

#menubar menu напрямую вызывает тег menu, поэтому он имеет приоритет.