連接id和html標籤之間的區別，即ul＃nav和#nav ul

Question

我只是玩弄菜單的css ul。我的

#nav ul {...} 

初始CSS沒有工作，但

ul#nav {...} 

工作。這是什麼原因？

另一個類似的問題是，是什麼區別：

div.grey 

OR

div .grey 

注意兩者之間的空間......

Answer 1

#nav ul尋找一個ul元素中的具有「nav」標識的元素。

<div id="nav"> 
    <ul> 
    <li>Like me</li> 
    </ul> 
</div> 

ul#nav尋找一個ul有值 「導航」 的ID。

<ul id="nav"> 
    <li>Like me</li> 
</ul> 

這同樣適用於類名：

div.grey查找具有類名 「灰色」 一個div元件。

<div class="grey">Foo</div> 

鑑於div .grey查找具有div內的類名 「Gey中」 的任何元件。

<div> 
    <p class="grey"> 
    I'm special! 
    </p> 
</div> 

Answer 2

#nav ul {...} 

選擇一個元件內部UL元件ID爲NAV

ul#nav {...} 

選擇id爲NaV的UL元件

當使用id選擇沒有 需要使用標籤選擇器。

div.grey 

選擇與類名灰色div元素

div .grey 

選擇所有div元素內使用類名稱灰色的所有元素

有關詳細閱讀看到Selectors

Answer 3

...

#nav ul {...} means ul inside an element having id nav 

ul#nav means ul element having id nav 

與上例所示類示例相同。

See CSS Selectors at W3C