css伪类选择器 计数器

CSS伪类选择器是一种用于选择HTML元素的CSS选择器，它们不是基于元素的属性，而是基于元素在文档中的位置、状态或内容等特征进行选择。而CSS计数器是一种伪类选择器，它通过一个变量来设置，根据规则递增变量。可以用于为元素添加序号或计数器。下面是一些常见的CSS计数器伪类选择器：
1. :first-child：选择某个元素的第一个子元素。
2. :last-child：选择某个元素的最后一个子元素。
3. :nth-child()：选择某个元素的一个或多个特定的子元素。
4. :nth-last-child()：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算。
5. :first-of-type：选择一个上级元素下的第一个同类子元素。
6. :last-of-type：选择一个上级元素的最后一个同类子元素。
7. :only-child：选择的元素是它的父元素的唯一一个子元素。
8. :only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素。
9. :nth-of-type()：选择指定的元素。
10. :nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算。

CSS计数器可以通过设置变量和规则来实现元素的计数，可以用于为元素添加序号或计数器。例如，可以使用以下代码为每个元素添加一个计数器，并在每个元素前添加“Section <计数值>：”：

body {
  counter-reset: section;
}
.element:before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}