本頁只練什麼
能在欄位群組內任一控制項聚焦時，以 :focus-within 清楚標示整組 label、提示與 input。
只替 input 畫細框可能難以看出目前欄位所屬說明；群組高亮可保留上下文，但不能取代控制項自己的 focus。
要修改的檔案：files/starter/style.css
定位：先確認 input 可 Tab 到且沒有 tabindex=-1。｜依 starter-1 定位，只修改「:focus-within」的責任。
LESSON-12 · TOPIC 01
:focus-within
能在欄位群組內任一控制項聚焦時，以 :focus-within 清楚標示整組 label、提示與 input。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
聯絡表單每組都有 label、input 與提示，但鍵盤使用者難以辨認目前是哪一組。
起始狀態：焦點不在欄位群組；field 沒有 :focus-within outline。
完成後要看到
現有 focus runtime 回傳 activeId=email-field/focused=true；required facts focused=true、focusWithin=true。
驗收證據：activeId=email-field、focused=true、focusWithin=true，父層 computed outline 可見
何時會用到
複合表單欄位、搜尋框、日期群組或需要讓提示文字跟著目前輸入位置醒目時。
常見混淆：:focus 只匹配實際 focused element；:focus-within 可匹配其祖先。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
:focus-within The focus-within pseudo-class
只要盒子裡面有人拿到焦點，外層盒子就能一起亮起來。
正式說法：:focus-within matches an element when itself or any descendant in the focus chain matches :focus。
.field:focus-within{outline:3px solid #1d4ed8}.field input:focus-visible{outline:2px solid #155e75}三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：先確認 input 可 Tab 到且沒有 tabindex=-1。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先確認 input 可 Tab 到且沒有 tabindex=-1。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先確認 input 可 Tab 到且沒有 tabindex=-1。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：先確認 input 可 Tab 到且沒有 tabindex=-1。要做：執行 focus runtime 聚焦 email-field；完整表單 probe 驗父層 :focus-within。
預期：現有 focus runtime 回傳 activeId=email-field/focused=true；required facts focused=true、focusWithin=true。
證據：activeId=email-field、focused=true、focusWithin=true，父層 computed outline 可見
卡住先查：先確認 input 可 Tab 到且沒有 tabindex=-1。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：先確認 input 可 Tab 到且沒有 tabindex=-1。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：現有 focus runtime 回傳 activeId=email-field/focused=true；required facts focused=true、focusWithin=true。
證據：activeId=email-field、focused=true、focusWithin=true，父層 computed outline 可見
卡住先查：先確認 input 可 Tab 到且沒有 tabindex=-1。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
:focus-withinruntime fixture · read-only demo
本主題示範畫面：
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
保留 input 自身 focus-visible，再處理父層。
提示 2｜關鍵片段
在 .field 使用 :focus-within，不用 JavaScript 加 class。
提示 3｜完整解答與原因
完整解答與原因：聚焦 email-field 後 input 匹配 :focus，祖先 .field 同時匹配 :focus-within，兩層提示各自保留。