CSS | :nth-of-type() 选择器

在CSS中，:nth-of-type()选择器可以用来选择元素类型的特定子元素。该选择器接受一个参数，该参数可以是数字、关键词或公式。

语法

:nth-of-type(n)

参数n可以是以下格式之一：

• an：表示每n个元素选择一次，其中a是任意整数，n表示要选择的元素的计数器的周期（从1开始计数）。
• odd：表示奇数元素。
• even：表示偶数元素。
• n：表示所有元素。

例如

/* 选择所有的偶数元素 */
li:nth-of-type(even) {
    background-color: lightgrey;
}

/* 选择每三个段落 */
p:nth-of-type(3n) {
    font-weight: bold;
}

/* 选择第二个子元素 */
div:nth-of-type(2) {
    color: red;
}

/* 选择前三个子元素 */
div:nth-of-type(-n+3) {
    font-size: 1.2em;
}

注意事项

• 这个选择器只能用于选择元素类型的子元素。
• 如果选择器无法找到指定的元素，它将忽略选择器并将其视为无效。