本頁只練什麼
能用空白 combinator 命中任意深度後代，並用 > 只命中直接子元素。
選錯 combinator 會讓規則滲入元件深層，或讓巢狀內容意外漏掉樣式。
要修改的檔案：files/starter/style.css
定位：先在 Elements 沿父層往上數，確認被測 p 與 .card 中間有一個 div。｜依 starter-2 定位，只修改「後代與子代 combinator」的責任。
LESSON-04 · TOPIC 02
後代與子代 combinator
能用空白 combinator 命中任意深度後代，並用 > 只命中直接子元素。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
卡片的第一層摘要要粗體，但深層補充文字只需要品牌色。
起始狀態：一個 p 是 card 直接子層，另一個 p 位於 card > div > p。
完成後要看到
直接 p 同時得到 color 與 font-weight；巢狀 p 只得到 descendant color，不得到 child font-weight。
驗收證據：巢狀 p 的 computed color 由 rgb(23, 50, 77) 變 rgb(21, 94, 117)，font-weight 仍維持 400
何時會用到
要限制元件第一層結構，或要讓深層內容也沿用特定規則時。
常見混淆：.card > p 不是選取所有 card 內的 p；中間多一層 div 就不匹配。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
後代與子代 combinator Descendant and child combinators
空白是『裡面不管隔幾層』；> 是『下一層就是它』。
正式說法：Descendant combinator 匹配某祖先內的後代元素；child combinator 僅匹配指定父元素的直接子元素。
.card p { color:#155e75 } .card > p { font-weight:700 }三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：先在 Elements 沿父層往上數，確認被測 p 與 .card 中間有一個 div。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先在 Elements 沿父層往上數，確認被測 p 與 .card 中間有一個 div。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先在 Elements 沿父層往上數，確認被測 p 與 .card 中間有一個 div。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：先在 Elements 沿父層往上數，確認被測 p 與 .card 中間有一個 div。要做：執行實驗在巢狀 p 切換 probe-on；descendant 規則命中 color，但 child 規則因非直接子層不命中。
預期：直接 p 同時得到 color 與 font-weight；巢狀 p 只得到 descendant color，不得到 child font-weight。
證據：巢狀 p 的 computed color 由 rgb(23, 50, 77) 變 rgb(21, 94, 117)，font-weight 仍維持 400
卡住先查：先在 Elements 沿父層往上數，確認被測 p 與 .card 中間有一個 div。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：先在 Elements 沿父層往上數，確認被測 p 與 .card 中間有一個 div。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：直接 p 同時得到 color 與 font-weight；巢狀 p 只得到 descendant color，不得到 child font-weight。
證據：巢狀 p 的 computed color 由 rgb(23, 50, 77) 變 rgb(21, 94, 117)，font-weight 仍維持 400
卡住先查：先在 Elements 沿父層往上數，確認被測 p 與 .card 中間有一個 div。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
後代與子代 combinatorruntime fixture · read-only demo
本主題示範畫面：
直接子層
巢狀後代
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
先畫出 card > p 與 card > div > p 兩條 DOM 路徑。
提示 2｜關鍵片段
空白規則可以跨過 div；> 規則不能。
提示 3｜完整解答與原因
完整解答與原因：巢狀 p 仍是 .card 的後代，因此 color 改變；它不是直接子層，所以 .card > p 的粗體規則不會命中。