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字）