CSS 选择器（二）：子代选择器(>)

后代选择器

后代选择器选择的范围广，范围是当前节点的所有子节点，包括其直接子节点。

<div id="app">
	<div>items-1
		<div>item-1-1</div>
		<div>item-1-2
			<div>items-1-2-1</div>
			<div>items-1-2-2</div>
		</div>
	</div>
	<div>items-2</div>
</div>

#app div {
	border: 4px solid #00B7FF;
}

所有div#app下面所有的div都运用了该样式，这就是后代选择器的效果。

子代选择器

子代选择器的范围小，范围是当前节点的直接子节点。

#app > div {
	border: 4px solid #00B7FF;
}

如图所示的内容是阶梯的效果，就是用子代选择器的结果：

div > div {
	margin-left: 20px;
}