css如何設置第一個子元素的高度

# CSS如何設置第一個子元素的高度

## 引言

在網頁布局中，精準控制子元素的樣式是前端開發的核心需求之一。CSS提供了多種選擇器和偽類來定位特定位置的子元素，其中`:first-child`偽類便是專門用于選擇父元素下的第一個子元素。本文將詳細介紹如何利用CSS設置第一個子元素的高度，涵蓋基本語法、實用場景及常見問題解決方案。

---

## 一、基礎語法：使用`:first-child`偽類

`:first-child`是CSS中最常用的結構偽類之一，用于匹配父元素中的第一個子元素。其基本語法如下：

```css
父元素 > :first-child {
  height: 值;
}

示例代碼

<div class="parent">
  <div class="child">第一個子元素</div>
  <div class="child">第二個子元素</div>
</div>

.parent > :first-child {
  height: 100px;
  background-color: lightblue;
}

效果說明：
第一個.child元素的高度將被設置為100px，而第二個元素不受影響。

二、擴展方法：結合其他選擇器

1. 類選擇器 + :first-child

若需針對特定類的第一個子元素，可組合使用類選擇器：

.child:first-child {
  height: 150px;
}

2. 通用選擇器*

當子元素類型不確定時：

.parent > *:first-child {
  height: 200px;
}

三、動態高度設置技巧

1. 使用百分比高度

需確保父元素有明確高度：

.parent {
  height: 300px;
}
.parent > :first-child {
  height: 50%; /* 實際高度為150px */
}

2. Viewport單位（響應式）

.parent > :first-child {
  height: 20vh; /* 視口高度的20% */
}

3. min-height與max-height

限制高度范圍：

.parent > :first-child {
  min-height: 50px;
  max-height: 200px;
}

四、常見問題與解決方案

問題1：:first-child未生效

原因：
- 目標元素不是父元素的第一個子元素（如存在空白文本節點）。 - 父元素未正確指定。

修復：
檢查DOM結構，或使用:first-of-type替代：

.parent > p:first-of-type {
  height: 120px;
}

問題2：高度繼承異常

場景：子元素高度依賴父元素但未顯式設置父元素高度。
解決：明確父元素高度或使用height: auto。

五、實戰應用場景

場景1：導航菜單首項突出

.nav li:first-child {
  height: 60px; /* 比其他項高10px */
}

場景2：卡片布局首行控制

.card-container > .card:first-child {
  height: 250px; /* 首張卡片更大 */
}

場景3：響應式表格首行固定

table tr:first-child {
  height: 40px;
  position: sticky;
  top: 0;
}

六、瀏覽器兼容性提示

推薦使用Autoprefixer工具處理兼容性問題。

結語

通過:first-child偽類及其變體，開發者可以精準控制首個子元素的高度，實現多樣化的布局需求。結合百分比、視口單位或動態限制，能進一步適配響應式設計。實踐中需注意DOM結構對選擇器的影響，并善用開發者工具調試樣式。

擴展閱讀：
- MDN :first-child文檔
- CSS Grid/Flexbox中首項高度控制技巧 “`