前陣子去面試，被問了兩個看似很基礎的問題（事實上也確實很基礎），當下我不知道要回答什麼。回來後反思，覺得這個經驗很值得分享——有些知識我們以為「很簡單」、「用就會了」，但實際上如果沒有刻意練習或定期複習，真的會在關鍵時刻腦袋一片空白。
這些知識我們理所當然地常常在用，但偶爾也要停下來想一下：為什麼這樣寫？還有什麼替代方案？原理是什麼？如果不這樣做，就很容易變成「會用但說不出所以然」的狀態。或是可以多看一些文章？
第一題：除了 div，還有什麼元素和它行為一樣？
面試官問我：「HTML 的div 有什麼元素和它行為一樣，但不是 div？」我當下愣了一下。div 嘛，就是一個區塊容器，display 是 block...那其他跟它一樣的...嗯...
當下是回答不出來，因為平常不會特別去用其他的東西去代替div。
後來結束後我才想起來，其實有很多 語意化標籤（Semantic HTML） 在預設行為上跟 div 是一樣的，都是 display: block 的區塊級元素。例如：
<section><article><header><footer><nav><aside><main>
這些標籤在外觀和排版行為上跟 div 幾乎沒差別，但它們有更明確的語意，主要是對 SEO、無障礙功能（accessibility）和程式碼可讀性都更友善。
為什麼會答不出來？
因為平常開發時，我們理所當然地用 div 解決所有佈局問題，很少停下來思考「這裡用 section 是不是更合適？」、「為什麼要用語意化標籤？」這些問題。
div 太方便了，隨手就能寫，久而久之，語意化標籤就從記憶中淡化了。我們會用 div，但忘了為什麼要有其他選擇。
這次被問到才發現，知道和能說出來，中間還隔著一個「練習」的距離。更重要的是，常用的東西偶爾也要想一下背後的原理。
第二題：CSS 選擇器的優先順序
面試官給了這樣一段 CSS：
h1 {
color: red;
}
h1 + p {
color: blue;
}
p + h1 {
color: green;
}
然後 HTML 結構是：
<h1>標題</h1>
<p>第一個段落</p>
<p>第二個段落</p>
問：「這三個元素分別會是什麼顏色？」
解題思路
這題考的是 相鄰兄弟選擇器（Adjacent Sibling Selector） + 的理解。
h1→ 所有的 h1 都是 redh1 + p→ 緊接在 h1 後面的 p 是 blue（第一個 p）p + h1→ 緊接在 p 後面的 h1 是 green（但這裡沒有這樣的結構！）
所以答案是：
<h1>→ red- 第一個
<p>→ blue（因為它緊接在 h1 後面） - 第二個
<p>→ 保持預設顏色（因為沒有任何規則選到它）
為什麼會卡關？
因為平常開發時，我們理所當然地用 class 或 :nth-child() 來選元素，+ 選擇器反而很少用到。當遇到這種題目時，腦中第一反應是「欸，這個符號我知道」，但實際要解釋出來時就卡住了。
而且這題還有個小陷阱：p + h1 看起來有規則，但實際上在這個 HTML 結構中根本選不到任何元素。這種邊緣案例如果沒有偶爾想一下，真的很容易掉入陷阱。
這就是典型的「常用的東西反而不深究，少用的東西又容易忘」的困境。
我的反思：理所當然的東西，偶爾也要重新想一下
這次面試經驗讓我深刻體會到：基礎知識不代表簡單，理所當然使用的東西更要定期思考。
很多時候我們會覺得「這個我以前學過」、「這個太簡單了」、「這個每天都在用」，但實際上：
- 會用 ≠ 理解原理
- 知道 ≠ 能說出來
- 常用 ≠ 深入思考過
如果沒有持續練習或定期回顧，真的會在需要時想不起來。尤其是在面試這種高壓情境下，更容易腦筋打結。
我的建議
- 定期複習基礎 - 即使是工作多年的工程師，如果你有要換工作的打算，也要回頭看看 HTML、CSS、JavaScript 的基礎概念
- 刻意練習 - 不要只是「看過」或「知道」，要真的動手寫、說出來，就像我現在把這個寫成文章
- 停下來思考 - 寫 code 時偶爾問自己：「為什麼這樣寫？」、「還有其他方法嗎？」、「這個選擇器的運作原理是什麼？」
- 整理筆記 - 把理所當然在用但容易忽略的知識點記錄下來
- 直接去面試吧 - 畢竟軟體工程師要會的東西太廣了，很難準備到人家會問什麼，就直接去吧！
希望我的經驗能提醒大家：理所當然的東西，偶爾也要重新想一下。別小看基礎題，也別高估自己的記憶力。持續學習和思考，才能在關鍵時刻不掉鏈子！
你也有類似的面試經驗嗎？歡迎在留言區分享你被「簡單題」考倒的故事！
