CSS 派生選擇器（後代選擇器）結構寫法詳解：空格代表「任意層級後代」

題目 HTML 結構

<div class=\"testcss\">
  <h1>
    <p>tttttttttt</p>
  </h1>
</div>

兩種寫法差異分析

核心規則

• 空格 = 後代選擇器：表示「任意層級嵌套」，非直接子代。
• 不需寫全路徑：只要能唯一鎖定目標、不產生副作用，越短越好（權重低、維護易）。
• 若需限定直接子代：使用 >（如 .testcss > h1 > p），但本例 h1 下直含 p 合法性存疑（HTML 標準 h1 不允許包含 p，瀏覽器會自動修正 DOM 結構）。

最佳實踐建議

1. 優先使用 .testcss p 或語意化類名 .testcss .content-text。
2. 避免過度依賴 HTML 標籤結構，改用 BEM 命名（.testcss__paragraph）解耦樣式與結構。
3. 使用開發者工具 Elements 面板 實際檢查渲染後 DOM 樹，而非信任原始碼縮排。

補充：HTML 標準合規性提醒

<h1><p>...</p></h1> 違反 HTML 內容模型（標題元素僅允許 phrasing content）。瀏覽器會將 p 提升為 h1 同級，導致實際 DOM 變為：

<div class=\"testcss\">
  <h1></h1>
  <p>tttttttttt</p>
</div>

此時 .testcss h1 p 反而**不生效**，而 .testcss p 依然有效。語意化標籤正確使用才是 CSS 穩健的前提。