CSS层叠优先

我有了这个HTML是我试图风格：CSS层叠优先

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

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

#menubar menu { 
    width: auto; 
}

...优先于。 ..

#menubarTransportControls { 
    width: 100%; 
}

我使用IE7与HTML5 shiv javascript。由于

来源

2011-06-07 mradbourne

你有没有把菜单的css稍后的id？你可以尝试扭转声明吗？ – sudipto 2011-06-07 10:59:34

@sudimail：仅供您参考：订单只在选择者具有同等特异性时才起作用，这不是这里的情况。 – thirtydot 2011-06-07 11:25:47

#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

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

来源

2011-06-07 10:52:55 thirtydot

+1 - 为了澄清OP的显而易见性，特异性覆盖了级联，即它们在表单中的顺序是更具体的规则无关紧要！ – clairesuzy 2011-06-07 11:22:49

因为#menubar menu比#menubarTransportControls

更具体的详情参见http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

来源

2011-06-07 10:49:53 vindia

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

来源

2011-06-07 10:52:17

这是关于小修道院。在CSS id是更强大然后class & element例如

id=100

class=10 
element=1

所以在你的榜样：

#menubar menu = 100 + 1 = 101

#menubarTransportControls = 100 = 100

所以哪一个更powreful。为更多检查此http://code.google.com/edu/submissions/html-css-javascript/（CSS演示文稿）

来源

2011-06-07 11:08:21 sandeep

不会投票下来，因为答案是**特异性**并且概念在这里，但是特异性不像添加数字那么简单（尽管除非在选择器中有超过9个元素，否则它将起作用） - 见[@ thirtydot的答案]（http://stackoverflow.com/questions/6264084/quick-css-cascading-question/6264148#6264148） - 张贴在你的正确的方式来计算它 – clairesuzy 2011-06-07 11:16:40

我只描述了什么radbourm3已要求我提供更多链接。 – sandeep 2011-06-07 11:23:18

CSS层叠优先

回答

相关问题