Дочерний селектор
 

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

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

Твой селектор правильный. :)
Вот только свойство для проверки ты выбрал неудачное... :(
Установка цвета распространяется на детей элемента.

Замени на рамку и увидишь, что все правильно выбрано. ;)

<style type='text/css'>
div#container > ul > li {
	border: 1px solid;
}
</style>
<div id="container">
	<ul>
		<li> Элемент списка
			<ul>
				<li> Дочерний элемент
					<ul>
						<li> Дочерний элемент, который глубже</li>
						<li> И еще один дочерний элемент</li>
					</ul>
				</li>
			</ul>
		</li>
		<li> Элемент списка </li>
		<li> Элемент списка </li>
		<li> Элемент списка </li>
	</ul>
</div>

И тут свойство выбрано неудачно...
Т.к. цвет фона он кагбэ у всего элемента. А его дети ведь внутри, на этом самом фоне. ;)

ksa, спасибо.
Но во втором случае все равно выделяется вся строка (и span 1 и span 2)

div > span { border: 1px solid; }

Первый пример вроде бы понял, но решил попробовать выделить только первые li во всех ul. Применил такой селектор:

ul + li { border: 1px solid; }

.
Вроде бы все как по правилу: X + Y { border: 1px solid; } - Селектор будет выбирать только элемент типа Y, который идет сразу после элемента Х.
Ничего не выделилось. Я прошу прощения, что задаю элементарные вопросы. Но пока дальше не получается двинуться.

Испытывал в jsfiddle (Firefox Quantum)

Он просто внутри первого, это нужно понимать.

Разницу видишь?

<style type='text/css'>
div > span {
	border: 1px solid;
}
#test span {
	border: 1px solid;
}
</style>
<div>
	<span>Span 1 в div
		<span>Span 2 в span, который в div</span>
	</span>
</div>
<div id='test'>
	<span>Span 1 в div
		<span>Span 2 в span, который в div</span>
	</span>
</div>
<span>Span 3. Не в div вообще</span>

Ты лучше скажи, чего хочешь получить в итоге? :)