CSS nth-of-type

CSS nth-of-type 是一个用于选中特定类型的子元素的伪类选择器。它可以根据给定的公式选择特定类型的子元素，从而方便地对它们应用样式。

语法

selector:nth-of-type(n)

• selector：要选择的父元素选择器。
• n：公式用于选择要匹配的子元素的索引。可以是一个具体的数字、关键字odd或偶数even，或一个公式an+b。

示例

选择第三个p元素

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

选择奇数个div元素

div:nth-of-type(odd) {
  background-color: grey;
}

选择偶数个li元素

li:nth-of-type(even) {
  background-color: lightblue;
}

选择3n+1个span元素

span:nth-of-type(3n+1) {
  font-weight: bold;
}

注意

• nth-of-type 可以应用于任何元素，而不仅仅是li、p或div。
• 公式an+b将匹配满足等式an+b的元素，其中n是自然数（从0开始），a和b是整数。例如，公式3n+1将匹配索引为1、4、7、10等的元素。