Question

我只是在玩css ul菜单。

我最初的css

#nav ul {...}

没有用，但是

ul#nav {...}

的工作。这是什么原因？

另一个类似的问题是：

之间的区别

div.grey

OR

div .grey

注意两者之间的空间......

Answer 1

#nav ul在ID为“nav”的元素中查找ul元素。

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

ul#nav查找id值为“nav”的ul。

<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 {...}

使用id nav

选择元素内的ul元素

ul#nav {...}

选择带有id nav

的ul元素

使用id选择器时没有需要使用标签选择器。

div.grey

选择类名为gray

的div元素

div .grey

在所有div元素

中选择类名为gray的所有元素

有关详细阅读，请参阅 Selectors

Answer 3

...

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

ul#nav means ul element having id nav

您所显示的类示例的情况也是如此。