Разница между объединением идентификатора и HTML-тега, т. Е. Ul # nav vs #nav ul

Question

Я просто поигрался с css ul для меню. Мой начальный CSS

#nav ul {...}

не работает, но

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 "nav".

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

То же самое относится и к именам классов:

div.grey ищет элемент div, имеющий имя класса "серый".

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

Принимая во внимание, что div .grey ищет любой элемент с именем класса "gey" в пределах div.

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

Answer 2

#nav ul {...}

выбирает элементы ul внутри элемента с идентификатором nav

ul#nav {...}

выберите элемент ul с id nav

Когда вы используете селектор идентификатора нет нужно использовать селектор тегов.

div.grey

выберите элемент div с именем класса grey

div .grey

выделяет все элементы с серым именем класса внутри всех элементов div

Подробнее см. Селекторы

Answer 3

...

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

ul#nav means ul element having id nav

То же самое и с примером классов, который вы показали.

См. CSS селекторы на W3C