CSS选择器之nth-child

在CSS中，nth-child伪类可以用来选中某个元素在其兄弟元素中的顺序。这个伪类可以接受一个表达式，用于选择指定的元素。

基本用法

nth-child伪类的基本语法如下所示：

:nth-child(expression) {
    /* CSS代码 */
}

其中，expression可以是以下格式之一：

• 数字，如1、2、3
• n (可以带有+/-号)，如n、2n、3n+1、-n+5
• odd（表示奇数）或even（表示偶数）

举个例子，下面这个样式将为表格中的所有第偶数行的背景设置灰色：

table tr:nth-child(even) {
    background-color: gray;
}

表达式

1. 数字

表达式可以直接是一个数字，表示选择某一个具体的位置，如下面的样式会选择第3个子元素：

parent div:nth-child(3) {
    /* 选择父元素下面的第3个div元素 */
}

2. n

表达式可以是n，表示所有位置都符合，如下面的样式会选择所有的子元素：

parent div:nth-child(n) {
    /* 选择父元素下的所有div元素 */
}

3. an

表达式可以是an，表示每a个位置符合，如下面的样式会选择每2个子元素：

parent div:nth-child(2n) {
    /* 选择父元素下每2个div元素 */
}

4. an+b

表达式还可以是an+b，表示每a个位置再加上b个位置符合，如下面的样式会选择每2个子元素再加上第1个子元素：

parent div:nth-child(2n+1) {
    /* 选择父元素下每2个div元素再加上第1个div元素 */
}

5. odd和even

表达式还可以是odd和even，分别表示奇数和偶数位置。如下面的样式会选择表格中的所有奇数行：

table tr:nth-child(odd) {
    /* 选择表格中的所有奇数行 */
}

总结

nth-child伪类可以用来选择某个元素在其兄弟元素中的位置。它可以接受一个表达式，常用的表达式有数字、n、an、an+b、odd和even。通过不同的表达式，我们可以精确地选择需要的元素。