HTML 的結構是樹形結構，A 節點有兩個節點 B 和 C，B 和 C 的父節點是 A 節點；B 節點有 D 節點，D節點是 B 節點的子節點，而 D 節點的祖先節點就是 A 節點。

B、C、D 這三個節點都是 A 節點的後代節點。子代選擇器針對於某節點的直接子節點（第一代子節點），而不是後代節點，其樣式只對該節點的第一代直接子節點有效：

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

（1）後代選擇器：

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

（2）子代選擇器：

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

以上兩種選擇器的區別顯而易見，子代選擇器的樣式只針對於div#app下的第一代子節點有效（直接子節點）；後代選擇器，顧名思義，凡是div#app的後代節點，包括直接子節點都運用該樣式。

<div>是一個塊級元素，雖然在 HTML 中層次分明，但是瀏覽器中呈現的效果是同級。上圖中塊級元素能夠展示出層級效果是因為子代選擇器：

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