css有哪些結構化偽類選擇器

# CSS有哪些結構化偽類選擇器

CSS的結構化偽類選擇器（Structural Pseudo-classes）允許開發者根據文檔樹中的結構關系來選擇元素，而無需添加額外的class或ID。這些選擇器極大地提升了CSS的選擇能力，使樣式控制更加靈活高效。以下是主要的CSS結構化偽類選擇器詳解：

## 1. `:first-child` 和 `:last-child`

- **`:first-child`**  
  匹配父元素中的第一個子元素。  
  ```css
  li:first-child { color: red; } /* 列表中的第一個<li>變紅 */

• :last-child
  匹配父元素中的最后一個子元素。
  

  
  div:last-child { border-bottom: none; } /* 最后一個<div>移除底部邊框 */
  

2. :nth-child() 和 :nth-last-child()

• :nth-child(n)
  根據公式選擇第n個子元素（從1開始計數）。

  tr:nth-child(2n) { background: #f5f5f5; } /* 表格偶數行背景色 */
  

• :nth-last-child(n)
  從末尾開始反向計數選擇子元素。

  li:nth-last-child(2) { font-weight: bold; } /* 倒數第二個<li>加粗 */
  

3. :only-child

匹配父元素中唯一的子元素（無兄弟元素時生效）。

span:only-child { font-size: 1.5em; } /* 單獨存在的<span>放大字體 */

4. :first-of-type 和 :last-of-type

• :first-of-type
  選擇同類型兄弟元素中的第一個。

  p:first-of-type { text-indent: 2em; } /* 第一個<p>段落縮進 */
  

• :last-of-type
  選擇同類型兄弟元素中的最后一個。

  img:last-of-type { margin-right: 0; } /* 最后一張圖片移除右外邊距 */
  

5. :nth-of-type() 和 :nth-last-of-type()

• :nth-of-type(n)
  根據位置選擇同類型元素。

  article:nth-of-type(3n) { border: 1px solid #ddd; } /* 每第3個<article>加邊框 */
  

• :nth-last-of-type(n)
  從末尾開始反向計數選擇同類型元素。

  section:nth-last-of-type(1) { padding-bottom: 0; } /* 最后一個<section>移除內邊距 */
  

6. :only-of-type

匹配父元素中唯一類型的子元素（同類元素無兄弟時生效）。

blockquote:only-of-type { width: 80%; } /* 唯一的<blockquote>調整寬度 */

7. :empty

選擇沒有任何子元素（包括文本節點）的元素。

div:empty { display: none; } /* 隱藏空<div> */

應用場景與注意事項

1. 動態內容樣式控制
   如表格隔行換色、列表首尾項特殊樣式等。

2. 性能優化
   避免過度使用復雜選擇器（如深層嵌套的:nth-child），可能影響渲染性能。

3. 瀏覽器兼容性
   所有現代瀏覽器均支持這些選擇器，但舊版IE（如IE8及以下）部分不支持。

通過合理使用結構化偽類選擇器，可以減少HTML冗余代碼，實現更精細的樣式控制。建議結合開發者工具調試以驗證選擇器效果。 “`

（全文約700字）