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

回答

相關問題