LESSON-04 · 自主延伸
把「選擇器、繼承與無效宣告」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
成果：完成一張能解釋 selector 命中、繼承與 cascade 結果的服務卡。
需要的檔案：files/starter/index.html（整合起點，保留跨 module 的最小缺口。）
完成後：完成一張能解釋 selector 命中、繼承與 cascade 結果的服務卡。
逐項展開；答不出來時先走補救連結，不必硬做。
自我檢查：我能否開啟 Elements、Console 或 Network 並找到本頁？
每一個目標只對應一個 module；成功狀態必須能指出證據。
依序展開；每次只改一項，操作後確認該模組自己的 DOM、progress 與 evidence。
白話：文字顏色像家族特徵，子層通常會沿用；邊框像各自的外框，不會自動傳下去。
正式說法：CSS property 具有不同的 inherited initial definition；color 預設繼承，border-width longhands 預設不繼承。
何時使用：子元素沒有自行宣告，但 Computed 值仍受祖先影響，或父層有邊框而子層沒有時。
修改前後：Before：看到父層 color 與 border 就預期子層兩者都有。After：先查 property 是否 inherited，再用子層 Computed 證明。
常見混淆：繼承不是 cascade 勝負；cascade 先決定元素自己的指定值，繼承是在缺少適用宣告時取得父層值。
情境：服務卡父層已有品牌文字色與外框，但卡片內的說明文字只有顏色相同、沒有自己的邊框。
起始狀態：父層 color 為 rgb(23, 50, 77)、border 為 4px；子層沒有 border-width 宣告。
目前主題：繼承與非繼承屬性
預期：子層 color 與父層相同；border-top-width 初始為 0px，加入明確 inherit 後才成為 4px。
證據：實驗 before=0px、after=4px；同一子層的 Computed color 與父層相同
第一個檢查：在 Elements 選取 data-inheritance-child，先讀 Computed color 與 border-top-width。
重設：重新載入 module，讓子層移除 inherit-border class。
本模組官方來源：MDN｜Inheritance
白話：空白是『裡面不管隔幾層』；> 是『下一層就是它』。
正式說法：Descendant combinator 匹配某祖先內的後代元素；child combinator 僅匹配指定父元素的直接子元素。
何時使用：要限制元件第一層結構，或要讓深層內容也沿用特定規則時。
修改前後：Before：.card p 與 .card > p 被當成相同。After：能從 DOM 深度預測每個 selector 的匹配集合。
常見混淆：.card > p 不是選取所有 card 內的 p；中間多一層 div 就不匹配。
情境：卡片的第一層摘要要粗體，但深層補充文字只需要品牌色。
起始狀態：一個 p 是 card 直接子層，另一個 p 位於 card > div > p。
目前主題：後代與子代 combinator
直接子層
巢狀後代
預期：直接 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。
重設：重新載入 module，移除巢狀 p 的 probe-on class。
白話：逗號像『以及』：這組樣式給 h2，也給 h3。
正式說法：Selector list 是以 comma 分隔的 selector 序列；規則宣告套用到清單中任一 selector 匹配的元素。
何時使用：多種元素或 class 確實需要完全相同的一組宣告時。
修改前後：Before：h2、h3 各複製一份相同規則。After：用一條 selector list 管理共同責任。
常見混淆：逗號不是後代關係；h2 h3 表示 h2 裡的 h3，h2, h3 才是兩個獨立 selector。
情境：首頁的區塊標題與卡片標題要共用品牌色，但普通段落不應被選入。
起始狀態：fixture 含一個 h2、一個 h3 與一個 p；只有前兩者具有 selector-list-hit。
目前主題：selector list
普通說明
預期：h2.selector-list-hit 與 h3.selector-list-hit 共匹配 2 個唯一元素；p 不在集合內。
證據：count=2、uniqueCount=2、valid=true，輸出文字同時包含章節標題與卡片標題
第一個檢查：在 Elements 數出 h2.selector-list-hit 與 h3.selector-list-hit，確認 p 沒有該 class。
重設：重新載入 module；集合由固定本機 DOM 重新建立。
本模組官方來源：MDN｜Selector list
白話：瀏覽器看到不認得的屬性值，會跳過那一筆，繼續使用其他有效規則。
正式說法：當 declaration 的 property value 不符合該 property grammar，user agent 會忽略該 declaration，不會回溯改寫其他有效 declarations。
何時使用：某一個 CSS property 沒生效，但同一規則或同一檔案的其他樣式仍正常時。
修改前後：Before：看到一行錯誤就認為整份 stylesheet 壞掉。After：在 Styles 找無效宣告，再讀 Computed 的實際保留值。
常見混淆：被 cascade 覆蓋的有效宣告與語法無效的宣告不同；前者可解析但輸掉，後者不會成為指定值。
情境：同事把品牌文字色寫成不存在的 CSS 顏色名稱，但頁面仍顯示前一條有效顏色。
起始狀態：目標元素由基礎規則取得 rgb(23, 50, 77)，尚未加 invalid-value class。
目前主題：瀏覽器如何忽略無效宣告
品牌說明文字
預期：before 與 after 都是 rgb(23, 50, 77)，Styles 可指出無效 `color: definitely-not-a-color`。
證據：runtime before 與 after 都等於 rgb(23, 50, 77)，property=color
第一個檢查：先在 Computed 記下 color，再到 Styles 找 color 值旁的無效提示。
重設：重新載入 module，移除 invalid-value class。
本模組官方來源：MDN｜CSS error handling
情境：在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。
交付：完成一張能解釋 selector 命中、繼承與 cascade 結果的服務卡。
檔案：files/starter/index.html 定位：#observe
操作：逐項讀取 outcomes，執行一次現況操作。
// OBSERVE：不修改程式，先記錄第一個失敗 moduleId。預期：能指出第一個未通過 module。
證據：第一個 moduleId 與缺少的 evidence。
原因：先觀察可避免未重現就直接改答案。
卡住先查：確認開啟的是 files/starter/index.html。
檔案：files/starter/index.html 定位：#modify
操作：執行實驗先讀子層 border-top-width，再切換 .inherit-border 令 border-width 明確使用 inherit。 → 執行實驗在巢狀 p 切換 probe-on；descendant 規則命中 color，但 child 規則因非直接子層不命中。 → 執行 collection probe，以 h2.selector-list-hit, h3.selector-list-hit 查找共同匹配集合。 → 執行實驗切換 invalid-value class，前後都讀取同一元素的 computed color。
// 04-01-topic: 執行實驗先讀子層 border-top-width，再切換 .inherit-border 令 border-width 明確使用 inherit。
// 04-02-combinator: 執行實驗在巢狀 p 切換 probe-on；descendant 規則命中 color，但 child 規則因非直接子層不命中。
// 04-03-selector-list: 執行 collection probe，以 h2.selector-list-hit, h3.selector-list-hit 查找共同匹配集合。
// 04-04-topic: 執行實驗切換 invalid-value class，前後都讀取同一元素的 computed color。預期：完成一張能解釋 selector 命中、繼承與 cascade 結果的服務卡。
證據：實驗 before=0px、after=4px；同一子層的 Computed color 與父層相同；巢狀 p 的 computed color 由 rgb(23, 50, 77) 變 rgb(21, 94, 117)，font-weight 仍維持 400；count=2、uniqueCount=2、valid=true，輸出文字同時包含章節標題與卡片標題；runtime before 與 after 都等於 rgb(23, 50, 77)，property=color
原因：逐項整合能把回歸定位到明確 module。
卡住先查：回到第一個未通過的 module，只修該處。
檔案：files/solution/index.html 定位：#verify
操作：重新整理並依 outcomes 順序重跑所有證據。
// VERIFY：逐項記錄 pass/fail，不以看到畫面代替 evidence。預期：4/4 module 通過。
證據：每個 moduleId 都有實際結果與重設後重現紀錄。
原因：單項通過不代表整合後沒有 selector、id 或狀態衝突。
卡住先查：若失敗，回到第一個失敗 module，不同時修多項。
檔案：files/starter/index.html 定位：#challenge
操作：替另一個商家情境重做，仍達成：完成一張能解釋 selector 命中、繼承與 cascade 結果的服務卡。
// CHALLENGE：只替換內容與資料，不新增框架或跳過 self-check。預期：完成一張能解釋 selector 命中、繼承與 cascade 結果的服務卡。
證據：轉用後的作品與全數 module self-check。
原因：能轉用才代表理解責任，而非只記住原範例。
卡住先查：先確認共同基底與 module id 未被改壞。
重設方法：重新載入 files/starter/index.html；若 localStorage 不可用，使用頁面內記憶狀態並提供重設按鈕。
挑戰：將同一組責任轉用到另一個商家情境，仍達成：完成一張能解釋 selector 命中、繼承與 cascade 結果的服務卡。
限制：不新增框架。；保留 module id 與驗收證據。
提交證據：提交可直接開啟的作品與逐項 self-check。
拆小：在「選擇器、繼承與無效宣告」先完成第一個尚未通過的 module：繼承與非繼承屬性，不同時修改其他責任。
串接：依 04-01-topic → 04-02-combinator → 04-03-selector-list → 04-04-topic 核對各自輸入與證據。
完整解答與原因：依序執行 執行實驗先讀子層 border-top-width，再切換 .inherit-border 令 border-width 明確使用 inherit。 → 執行實驗在巢狀 p 切換 probe-on；descendant 規則命中 color，但 child 規則因非直接子層不命中。 → 執行 collection probe，以 h2.selector-list-hit, h3.selector-list-hit 查找共同匹配集合。 → 執行實驗切換 invalid-value class，前後都讀取同一元素的 computed color。；這個順序能把每個結果對回單一 module，避免整合後無法定位。
完整解答預設收合；先留下自己的嘗試，再開第三層。