LESSON-04 · 零基礎學生教材
CSS 基礎：選擇器與 Cascade
在 index.html 的品牌、兩張服務卡與 CTA 上建立可預測的 class selector 規則，並能用 Styles／Computed 解釋 cascade。
先理解：這堂課解決什麼問題？
首頁 HTML 已經有內容，但品牌色、卡片與 CTA 尚未套用；需要精準指定要改哪一類元素。
本堂要完成：在 index.html 的品牌、兩張服務卡與 CTA 上建立可預測的 class selector 規則，並能用 Styles／Computed 解釋 cascade。
學習邊界：先完成「理解 selector、cascade 與規則套用順序」，不提前引入尚未教過的框架或建置工具。
第一次上課環境：先準備 CSS 觀察工具
- 編輯器：建立
commercial-site/，本堂只修改index.html與style.css。 - 瀏覽器：開啟
index.html；每次儲存 CSS 後回到瀏覽器重新整理。 - DevTools：按右鍵選「檢查」，Elements 用來選取元素，Styles 用來看命中／被劃掉的規則，Computed 用來讀最後值，Network 用來確認 CSS 是否 200。
- 操作習慣：每次只修改一個 selector，先預測結果，再儲存、重新整理，最後用 DevTools 與 Tab focus 證明結果。
先做最小實驗：先看見結果
這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。
- 入口：開啟
examples/minimal/index.html。 - 操作：先開啟最小實驗，在 Elements 選取品牌、兩張服務卡與 CTA；接著到 Styles 查看命中規則，再到 Computed 讀取 color 與 background-color。
- 預期：
style.cssNetwork 為 200；.brand、.service-card、.button都能在 Styles 命中，兩條.button規則中較後者生效，Computed 顯示最後背景色。 - 重設：重新整理
examples/minimal/index.html，清除 DevTools 的暫時修改；不要直接修改最小實驗作為學生答案。
學生練習流程
依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。
-
1
最小實驗
第一次開啟 CSS：建立commercial-site/、index.html與style.css，儲存後用瀏覽器重新整理。 -
2
最小實驗 2
先開啟examples/minimal/index.html，在 Elements 選取 .brand、.service-card 與 .button，再到 Styles／Computed 讀結果。 -
3
名詞
回到名詞卡，依序拆解元素 selector、class selector、class、property、value、declaration、cascade、specificity、Styles 與 Computed。 -
4
Starter
把 Starter 複製到自己的工作資料夾，依序完成 .brand、.service-card、.button 三個 CSS 微任務；每一步只修改 style.css 並留下 DevTools 證據。 -
5
Checkpoint
開啟 Checkpoint，觀察後寫 .button 規則造成的錯誤背景色，從 Styles 找出被劃掉的宣告，再只修正規則順序。 -
6
Solution
前往 Solution，確認三個 selector、Computed 最終值、Network 的 style.css 200、390px 無水平溢出與 Tab focus。 -
7
變體驗收
完成另一個服務型商家變體，保留 index.html／style.css 與三個 class 責任，不新增 JavaScript、框架、全域 selector 或部署工具，並閱讀下一堂銜接：盒模型：下一堂會追查樣式套用後，卡片實際佔了多少寬度與空間。
檔案地圖：每個位置負責什麼？
先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。
index.html首頁入口：呈現商家第一印象與主要 CTA。style.cssCSS 樣式檔：放置本堂「理解 selector、cascade 與規則套用順序」相關的版面規則。body元素選擇範圍：觀察整個頁面的全域樣式。.brand品牌 class：套用品牌名稱的視覺規則。.service-card服務卡片 class：控制每張服務資訊卡的共用樣式。.button按鈕 class：統一 CTA 的可見樣式與互動狀態。
先學會這些詞
先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。
選擇器與宣告
6 個詞元素 selectorelement selector 白話意思：用 HTML 元素名稱選出一整類元素。 展開查看正式定義、範例與驗收證據
- 正式定義
- 以元素名稱作為匹配條件的 CSS selector，例如 body 或 p。
- 什麼時候用
- 要先示範全頁或某一類 HTML 元素的共同樣式時。
- 最小範例
- body { color: #17324d; } 會套用到 body 元素。
- 可觀察證據
- 在 Elements 選取元素，Styles 顯示 body 規則命中。
- 容易混淆
- 和 class selector 混淆；元素 selector 看標籤名稱，class selector 看 class 屬性。
class selectorclass selector 白話意思：用 class 名稱選出可以共用樣式的一組元素。 展開查看正式定義、範例與驗收證據
- 正式定義
- 以
.加上 class 名稱匹配 HTML 元素的 CSS selector。 - 什麼時候用
- 兩張服務卡或一個 CTA 需要各自套用相同責任時。
- 最小範例
- .service-card { background-color: #eaf5f8; }。
- 可觀察證據
- Elements 選取兩張卡片時，Styles 都顯示同一條
.service-card規則。 - 容易混淆
- 和 id selector 混淆；class 可以重複使用，id 通常只識別一個元素。
classclass attribute 白話意思：貼在 HTML 元素上的可重用名稱。 展開查看正式定義、範例與驗收證據
- 正式定義
- HTML 元素的 class 屬性，常被 CSS class selector 用來匹配。
- 什麼時候用
- 需要讓多個元素共用一組 CSS 規則時。
- 最小範例
- <section class="service-card">服務內容</section>。
- 可觀察證據
- Elements 看見 class="service-card"，Styles 能找到
.service-card。 - 容易混淆
- 和 CSS selector 混淆；class 是 HTML 屬性，
.service-card才是 CSS selector。
propertyCSS property 白話意思：CSS 想要改變的項目名稱。 展開查看正式定義、範例與驗收證據
- 正式定義
- CSS declaration 中描述樣式特性的名稱，例如 color 或 background-color。
- 什麼時候用
- 要讀懂一條 CSS 規則正在改什麼時。
- 最小範例
- .brand { color: #155e75; } 中 color 是 property。
- 可觀察證據
- Styles 左側看到 property，Computed 顯示最後採用的值。
- 容易混淆
- 和 value 混淆；property 是名稱，value 是實際設定。
valueCSS value 白話意思：property 實際採用的設定內容。 展開查看正式定義、範例與驗收證據
- 正式定義
- CSS declaration 中賦予 property 的顏色、數字、單位或關鍵字。
- 什麼時候用
- 要確認瀏覽器最後使用哪個色碼或尺寸時。
- 最小範例
- .brand { color: #155e75; } 中 #155e75 是 value。
- 可觀察證據
- Computed 顯示最後計算出的 rgb 或其他值。
- 容易混淆
- 和 property 混淆；先找左邊的名稱，再讀右邊的值。
declarationCSS declaration 白話意思：一組 property 和 value 的配對。 展開查看正式定義、範例與驗收證據
- 正式定義
- 由 property、冒號、value 與分號組成的 CSS 宣告，例如
color: #155e75;。 - 什麼時候用
- 要逐行讀 CSS，並確認每一行責任時。
- 最小範例
- .button { background-color: #176b87; } 裡的 background-color 與色碼是一組 declaration。
- 可觀察證據
- Styles 顯示該宣告是否命中、是否被劃掉。
- 容易混淆
- 和 selector 混淆；selector 選誰，declaration 說要改什麼。
規則套用
2 個詞cascadeCSS cascade 白話意思：多條規則同時命中時，瀏覽器決定最後採用哪一條。 展開查看正式定義、範例與驗收證據
- 正式定義
- 瀏覽器依來源、重要性、specificity 與出現順序等條件解析衝突宣告的計算流程。
- 什麼時候用
- Styles 有多條相同 property，或某一條宣告被劃掉時。
- 最小範例
- 兩條 .button 都設定 background-color 時，同等 specificity 下後寫的規則會生效。
- 可觀察證據
- Styles 同時看到生效與被劃掉的宣告，Computed 顯示最後值。
- 容易混淆
- 和 JavaScript 執行順序混淆；cascade 是 CSS 規則的選擇，不是程式碼事件。
specificityCSS specificity 白話意思：當多條規則命中時，瀏覽器比較誰比較精準的規則權重。 展開查看正式定義、範例與驗收證據
- 正式定義
- CSS selector 參與 cascade 比較的匹配權重；本課先限制在同等 specificity，觀察 source order。
- 什麼時候用
- 需要理解為什麼一條命中規則蓋過另一條時。
- 最小範例
- 兩條 .button 的 specificity 相同，因此後寫的背景色會覆蓋前一條。
- 可觀察證據
- Styles 可比較兩條 selector，Computed 可確認最後值。
- 容易混淆
- 和後寫順序混淆；本課的 Checkpoint 先保持 specificity 相同，只改規則順序。
工具與焦點
4 個詞StylesStyles panel 白話意思：DevTools 裡查看哪些 CSS 規則命中元素的面板。 展開查看正式定義、範例與驗收證據
- 正式定義
- 瀏覽器 DevTools 用來顯示元素匹配到的 CSS 宣告、來源與被覆蓋狀態的面板。
- 什麼時候用
- 要確認 selector 有沒有命中，或找出哪條宣告被劃掉時。
- 最小範例
- 在 Elements 選取 .button，再查看 Styles 的 .button 規則。
- 可觀察證據
- 看到
.brand、.service-card、.button命中，以及被覆蓋宣告的刪除線。 - 容易混淆
- 和 Computed 混淆；Styles 看規則來源，Computed 看最後結果。
ComputedComputed styles 白話意思：瀏覽器最後真正採用的 CSS 值。 展開查看正式定義、範例與驗收證據
- 正式定義
- DevTools 顯示元素經過 cascade、繼承與預設值計算後的最終樣式結果。
- 什麼時候用
- 規則看似存在但畫面不同，或要確認最後 color／background-color 時。
- 最小範例
- 選取 .service-card，在 Computed 讀 background-color 與 color。
- 可觀察證據
- Computed 的實際 rgb 值能和 Styles 的生效宣告互相對照。
- 容易混淆
- 和 CSS 原始碼混淆；原始碼可能被覆蓋，Computed 才是目前結果。
DevToolsDeveloper Tools 白話意思：瀏覽器裡用來查看與驗證網頁的工具箱。 展開查看正式定義、範例與驗收證據
- 正式定義
- 提供 Elements、Styles、Computed、Network 等面板以檢查瀏覽器實際結果的開發工具。
- 什麼時候用
- 畫面和 CSS 預期不同，或需要留下可重現證據時。
- 最小範例
- 在頁面按右鍵選「檢查」，先從 Elements 選取 CTA，再看 Styles。
- 可觀察證據
- DOM、命中規則、Computed 值、CSS URL 與狀態碼都能被查到。
- 容易混淆
- 和編輯器混淆；編輯器修改來源，DevTools 檢查瀏覽器執行結果。
focus-visible:focus-visible 白話意思：只用鍵盤 Tab 操作時，讓目前的連結有清楚外框。 展開查看正式定義、範例與驗收證據
- 正式定義
- 當瀏覽器判斷需要顯示可見焦點提示時套用的 CSS pseudo-class。
- 什麼時候用
- 驗收 CTA 能不能被鍵盤找到與操作時。
- 最小範例
- .button:focus-visible { outline: 3px solid #f1ab2c; }。
- 可觀察證據
- 按 Tab 到 CTA 時看到清楚 outline，且沒有用 outline:none 隱藏。
- 容易混淆
- 和
:hover混淆；hover 依賴滑鼠，focus-visible 是鍵盤焦點證據。
最小例子：先看懂，再複製
這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。
body {
color: #17324d;
}Live Lab：逐段讀碼與驗證
每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。
-
Step 1
先開啟最小實驗，看到 CSS 從哪裡來
- 目的
- 先把 HTML 入口、外部 CSS 與 DevTools 三者連起來，不急著背術語。
- 修改位置
examples/minimal/index.html、examples/minimal/style.css
重新整理頁面，在 Network 確認style.css為 200，再用 Elements 選取一張.service-card。- 預期結果
- 頁面可開啟，Network 顯示
style.css200；Elements 可以看到.brand、兩個.service-card與.button。 - 驗收證據
- Network 的
style.css／200、Elements 的 class 名稱與頁面初始外觀。 - 卡住先查
- 先確認目前網址是
examples/minimal/index.html，再檢查style.css的請求 URL 與狀態碼。
-
Step 2
用
.brand完成第一個 class selector- 目的
- 把 selector、property 與 value 分開閱讀。
- 修改位置
style.css的.brand區塊
在 TODO-1 位置加入品牌文字色，儲存後重新整理。- 預期結果
- 只有品牌名稱變成預期品牌色；Styles 顯示
.brand命中，Computed color 能讀到最後值。 - 驗收證據
- Elements 選取品牌連結、Styles 的
.brand命中與 Computed 的 color。 - 卡住先查
- 先查看 HTML 是否真的有 class="brand"，再逐字比對 CSS 的點與名稱。
-
Step 3
用
.service-card同時命中兩張卡片- 目的
- 理解同一個 class 可以重複使用，規則責任不必複製兩份。
- 修改位置
style.css的.service-card區塊
在 TODO-2 位置加入卡片背景與文字色，重新整理後選取兩張卡片比較。- 預期結果
- 兩張卡片都套用相同規則，其他說明段落不會一起變成卡片色。
- 驗收證據
- Elements 搜尋到兩個
.service-card；Styles 與 Computed 在兩張卡片都一致。 - 卡住先查
- 先數 HTML 中
.service-card的數量，再看其中一張是否出現 Styles 命中。
-
Step 4
用
.button完成 CTA 的 class selector- 目的
- 把 CTA 的視覺責任限制在有
.button的連結，不影響一般文字連結。 - 修改位置
style.css的.button區塊
在 TODO-3 位置加入 CTA 的背景、文字與底線規則。- 預期結果
- CTA 出現品牌背景與白色文字；一般連結不會被誤套用按鈕外觀。
- 驗收證據
- Elements 選取 CTA、Styles 的
.button命中、Computed 的 background-color 與 color。 - 卡住先查
- 先確認 CTA 的 class 名稱，再查看
.button是否位於正確的style.css。
-
Step 5
在 Checkpoint 找出 cascade 覆蓋
- 目的
- 用同等 specificity 的兩條
.button規則，觀察後寫宣告如何覆蓋前一條。 - 修改位置
checkpoint/files/style.css的.buttoncascade 規則順序
只處理最後一條.buttonbackground-color，讓預期的 #176b87 最後生效；不要新增 !important。- 預期結果
- 修正後 Computed background-color 回到 #176b87，Styles 仍保留被劃掉規則作為 cascade 證據。
- 驗收證據
- 修正前後的 Styles 刪除線、Computed background-color 與檔案中的規則順序。
- 卡住先查
- 只選取 CTA，先看 Styles 最後一條
.buttonbackground-color，再回到 CSS 改一處。
-
Step 6
用可觀察證據完成 CSS 驗收
- 目的
- 把「看起來對」轉成別人可以重做的證據。
- 修改位置
index.html、style.css、瀏覽器 DevTools
依序檢查 CSS 200、Styles 命中、Computed 最終值、390px 無溢出與 Tab focus。- 預期結果
- 學生能說明修改了哪個 selector、哪個 property，以及用哪個證據確認結果。
- 驗收證據
- Elements、Styles、Computed、Network、390px 畫面與 Tab focus 的驗收紀錄。
- 卡住先查
- 一次只檢查一項：先 CSS 200，再 selector 命中，最後檢查 Computed 與 focus。
操作層級Live Lab 段落導覽：切換六個實驗步驟
讀碼順序：先找入口，再用 Elements、Styles、Computed、Network、390px 與 Tab focus 驗證；本堂不使用 JavaScript 或 Console 證明 CSS 有效。
互動問答
先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。
Q1概念理解 「元素 selector（element selector）」在本堂要解決什麼問題？ 本題線索：元素 selector；回到名詞卡與 在 Elements 選取元素，Styles 顯示 body 規則命中。 展開解析收合解析
白話解析：
用 HTML 元素名稱選出一整類元素。 正式來說，以元素名稱作為匹配條件的 CSS selector，例如 body 或 p。
對照位置：
回到名詞卡「元素 selector」，再看 在 Elements 選取元素，Styles 顯示 body 規則命中。
預期觀察：
你應該能用自己的話說出：要先示範全頁或某一類 HTML 元素的共同樣式時。
常見錯誤：
不要只回答「它是元素 selector」；那是重複名詞，不是說明責任。
立即驗證：
開啟 examples/minimal/index.html，依序做「先開啟最小實驗，在 Elements 選取品牌、兩張服務卡與 CTA；接著到 Styles 查看命中規則，再到 Computed 讀取 color 與 background-color。」並記下畫面或工具證據。
Q2程式碼閱讀
修改指定規則後，你預測畫面會看到什麼？
本題線索：examples/minimal/index.html、examples/minimal/style.css；要修改：重新整理頁面，在 Network 確認 style.css 為 200，再用 Elements 選取一張 .service-card。；觀察：Network 的 style.css／200、Elements 的 class 名稱與頁面初始外觀。
展開解析收合解析
白話解析：
先看檔案責任，再預測結果。這一步的目的：先把 HTML 入口、外部 CSS 與 DevTools 三者連起來，不急著背術語。
對照位置：
對照 Live Lab Step 1，位置是 examples/minimal/index.html、examples/minimal/style.css；範例內容：body {
color: #17324d;
}
預期觀察：
頁面可開啟，Network 顯示 style.css 200；Elements 可以看到 .brand、兩個 .service-card 與 .button。
常見錯誤：
如果只改了檔案但沒有結果，先不要重寫全部；先確認目前網址是 examples/minimal/index.html，再檢查 style.css 的請求 URL 與狀態碼。
立即驗證：
實際操作後檢查 Network 的 style.css／200、Elements 的 class 名稱與頁面初始外觀。。
Q3概念比較
「元素 selector」和「class selector」在本堂的責任有什麼不同？
本題線索：比較 元素 selector 與 class selector；操作位置：style.css 的 .brand 區塊
展開解析收合解析
白話解析：
元素 selector：用 HTML 元素名稱選出一整類元素。；class selector：用 class 名稱選出可以共用樣式的一組元素。
對照位置：
對照兩張名詞卡的正式定義：以元素名稱作為匹配條件的 CSS selector，例如 body 或 p。／以 . 加上 class 名稱匹配 HTML 元素的 CSS selector。
預期觀察：
你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。
常見錯誤：
不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。
立即驗證：
在 style.css 的 .brand 區塊 做「在 TODO-1 位置加入品牌文字色，儲存後重新整理。」，再用 Elements 選取品牌連結、Styles 的 .brand 命中與 Computed 的 color。 比較前後差異。
Q4除錯驗收
如果完成操作後結果不對，你會先從哪一個證據開始查？
本題線索：index.html、style.css、瀏覽器 DevTools；第一個檢查位置：Elements、Styles、Computed、Network、390px 畫面與 Tab focus 的驗收紀錄。
展開解析收合解析
白話解析：
先描述症狀，再提出一個最小假設。本堂常見錯誤是：只交一張桌機截圖，或把 Solution 複製後無法指出 cascade 的原因。
對照位置：
對照最後一段 Live Lab：index.html、style.css、瀏覽器 DevTools；檢查方式：一次只檢查一項：先 CSS 200，再 selector 命中，最後檢查 Computed 與 focus。
預期觀察：
你要能指出一個具體位置，而不是一次修改很多檔案。
常見錯誤：
不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。
立即驗證：
重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。
除錯對照表：先看證據，再改一處
| 看到的症狀 | 第一個證據 | 先檢查什麼 |
|---|---|---|
| 規則沒有出現在 Styles | Network 的 style.css URL／狀態碼 | 確認 style.css 請求為 200，再確認 selector 與 HTML class 完全一致。 |
| 規則出現但被劃掉 | Styles 的 selector、property 與順序 | 比較同一 property 的 selector specificity 與後寫順序，不先加 !important。 |
| 畫面顏色和預期不同 | Computed 的 color／background-color | 先選取真正的 .brand、.service-card 或 .button，再回到最後生效宣告。 |
| Tab 看不到目前位置 | 鍵盤 focus 與 Styles | 只按 Tab 到 CTA，確認 a:focus-visible 沒有被 outline:none 覆蓋。 |
常見誤解
- 看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
- 能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
- 本堂只使用 HTML、CSS 與瀏覽器 DevTools；學生檔案只需要
index.html與style.css，不加入其他程式或建置工具。
本堂任務與驗收
在 index.html 的品牌、兩張服務卡與 CTA 上建立可預測的 class selector 規則，並能用 Styles／Computed 解釋 cascade。
- 能用 Styles 命中
.brand／.service-card／.button留下可重現證據。 - 能用 Computed 的 color／background-color 留下可重現證據。
- 能用 Checkpoint 的 cascade 被覆蓋與修正證據 留下可重現證據。
- 能用 CSS Network 200 留下可重現證據。
- 能用 390px 無水平溢出與 Tab focus 留下可重現證據。
- Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
- 遇到問題時能先寫出症狀，再檢查一個最小假設。