CSS结构伪类选择器详解

CSS结构伪类选择器是基于元素在文档的结构来选择元素的方式。以下是几个常用的结构伪类选择器及其示例：

1. :first-child：选择父元素的第一个子元素。

p:first-child {
  color: red;
}

2. :last-child：选择父元素的最后一个子元素。

p:last-child {
  color: red;
}

3. :nth-child(n)：选择父元素的第 n 个子元素。

p:nth-child(2) {
  color: red;
}

4. :nth-of-type(n)：选择同类型的父元素下的第 n 个 <p> 元素。

p:nth-of-type(2) {
  color: red;
}

5. :first-of-type：选择同类型的父元素下的第一个 <p> 元素。

p:first-of-type {
  color: red;
}

6. :last-of-type：选择同类型的父元素下的最后一个 <p> 元素。

p:last-of-type {
  color: red;
}

7. :only-child：选择是唯一子元素的元素。

p:only-child {
  color: red;
}

8. :only-of-type：选择父元素下唯一的 <p> 元素。

p:only-of-type {
  color: red;
}

9. :empty：选择没有子元素（包括文本）的元素。

p:empty {
  display: none;
}

这些选择器可以用来定制元素之间的关系样式，使得文档结构更加清晰和可维护。