[ksa]

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

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

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

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