[hubble]

При использовании такого селектора, необходимые элементы не выбираются. Выбирается все: и Элементы списка и Дочерний элемент и еще дальше.
Как выбрать ТОЛЬКО Элементы списка (без дочерних)

div#container > ul > li{color:darkmagenta;}

<div id="container">
  <ul>
    <li> Элемент списка
      <ul>
        <li> Дочерний элемент</li>
        <ul>
          <li> Дочерний элемент, который глубже</li>
          <li> И еще один дочерний элемент</li>
        </ul>
      </ul>
    </li>
    <li> Элемент списка </li>
    <li> Элемент списка </li>
    <li> Элемент списка </li>
  </ul>
</div>

Такой же вопрос и в этом примере:

div > span { background-color: yellow; }

<div>
  <span>Span 1 в div
    <span>Span 2 в span, который в div</span>
  </span>
</div>
<span>Span 3. Не в div вообще</span>

Должен был подкраситься только Span 1 в div, а подкрашивается и span 1 и span 2