CSS结构伪类选择器详解

作者：System 时间：2024年08月14日分类：所有,css 字数：880

这篇文章距离上次修改已过238天，其中的内容可能已经有所变动。

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

p:first-child {
  color: red;
}

p:last-child {
  color: red;
}

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

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

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

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

p:only-child {
  color: red;
}

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

p:empty {
  display: none;
}

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