连接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