先看這個例子
lesson 小節有一個直接段落，另一段放在內層 section。直接規則用 .lesson>p，內層段落另有紫色規則。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 子元素選擇器 | .lesson>p | 只配對 direct |
| 後代選擇器 | .lesson p | 配對 direct 和 nested |
| 真正色值 | 讀兩個 color 值 | 綠、紫 |
瀏覽器怎樣處理
子元素組合符要求直接父子關係；後代選擇器可以跨多層。兩者都不改元素樹，只按已有結構配對。
用後代規則，兩層都會配對
反例把一條綠色後代規則套到兩段。
<style>body{margin:8px}</style>
<style>.lesson p{color:rgb(0,80,40)}</style><section class="lesson"><p id="direct">直接段落</p><section><p id="nested">內層段落</p></section></section>兩段都配對並變綠色，失去原定只改第一層的範圍。
試着修正
nested 再移深一層，.lesson>p 會開始配對它嗎？
查看參考答案
不會，仍不是直接父子。後代選擇器則繼續配對。
- 先記配對到的 id 集合，再比色值。
- 查真正巢狀關係，不靠縮排推定。