Selectors / Cascade / Specificity：為什麼你寫的 CSS 沒生效？

Learning outcomes

• 能讀 element/class/id/compound selectors。
• 能解釋 cascade、specificity、source order。
• 能避免用大量 ID / !important 堆權重。
• 能用 DevTools Styles/Computed 找到真正生效 rule。

1. Selector 是「哪些 elements 被命中」

p { color: #222; }
.card { padding: 1rem; }
#hero { min-height: 20rem; }
nav a { text-decoration: none; }
.card > p { margin: 0; }

2. Cascade 決定同一 property 最後贏家

p { color: black; }
.card { color: blue; }
#hero { color: red; }

對同一 element 的 color，Browser 會綜合 origin/importance/specificity/source order，而不是單純「最後一行永遠贏」。

3. Specificity 是解 conflict，不是分數競賽

ID 通常比 class 更 specific，class 又比 element；但高 specificity 會增加之後 override 成本。好的 CSS architecture 通常不需要一直「加更重 selector」。

4. Pseudo-class 描述狀態

a:hover { text-decoration: underline; }
button:focus-visible {
  outline: 3px solid currentColor;
}
input:invalid { border-color: crimson; }

5. Inheritance / Initial / Computed

有些 property 會 inheritance，例如常見文字 color/font；layout width/margin 通常不會。DevTools Computed 是確認「最後到底多少」的 evidence。

Project checkpoint：Course Profile v4

:root {
  font-family:
    system-ui, sans-serif;
}

.course-card {
  border: 1px solid #d9e2ed;
}

.course-card a {
  font-weight: 700;
}

.course-card a:focus-visible {
  outline: 3px solid;
}

先建立低 specificity、可預測的基礎 rules，下一課再處理盒子尺寸與 typography。

Debug evidence：CSS 沒生效

1. selector 有沒有命中 element？
2. Styles 裡 declaration 是否被劃掉？
3. 哪條 rule specificity/order 贏？
4. Computed 最終 value 是什麼？