Day 6 - CSS 選擇器的魔法圈 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 6

Modern Web

程式煉金術：Bug退散！前端驅魔記系列第 6 篇

Day 6 - CSS 選擇器的魔法圈

17th鐵人賽 30dayshtml

joanna2005823

團隊nutc imac

2025-09-20 17:01:29

19 瀏覽

分享至

學習目標

熟悉元素、類別、ID、群組、子元素、後代等選擇器
了解常見偽類（:hover, :focus, :nth-child()）的使用
建立選擇器優先度與覆寫的正確觀念
能透過小實驗區分子元素與後代元素的差異

重點觀念（先選對，再寫對）

選對元素是第一步：大部分 CSS 問題並不是屬性寫錯，而是沒選到正確的元素。
結構清楚，樣式才穩：HTML 架構越乾淨，CSS 越能精準命中。
優先度 ≠ 出現順序：不同選擇器有不同權重，#id > .class > tag。
避免過度巢狀：class 應是主要工具，避免長串選擇器綁死結構。

選擇器示範

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day 6 - 選擇器示範</title>
  <style>
    p { color: blue; }              /* 元素 */
    .highlight { background: yellow; } /* 類別 */
    #title { font-size: 24px; }     /* ID */
    div p { color: red; }           /* 後代 */
    div > p { color: green; }       /* 子元素 */
    h1, h2, h3 { font-weight: bold; } /* 群組 */
    a:hover { color: orange; }      /* 偽類 */
    li:nth-child(2) { text-decoration: underline; }
  </style>
</head>
<body>
  <h1 id="title">CSS 選擇器 Demo</h1>

  <p>這是元素選擇器：文字藍色。</p>
  <p class="highlight">這是類別選擇器：背景黃色。</p>

  <div>
    <p>我是 div 的子元素（綠色）。</p>
    <section>
      <p>我是 div 的後代元素（紅色）。</p>
    </section>
  </div>

  <h2>互動測試</h2>
  <a href="#">滑過看看 hover 效果</a>
  <ul>
    <li>第一項</li>
    <li>第二項（nth-child 命中）</li>
    <li>第三項</li>
  </ul>
</body>
</html>