2024年3月7日发(作者：)

nth-child(even)用法

`nth-child(even)`是一种CSS伪类选择器，用于选择元素集合中的偶数位置的元素。

以下是`nth-child(even)`选择器的使用示例：

```css

ul li:nth-child(even) {

background-color: lightgray;

}

```

上面的示例选择了`ul`元素内所有的偶数位置的`li`元素，并将其背景颜色设置为浅灰色。

注意事项：

- `nth-child(even)`选择器是从1开始计数的，而不是从0开始。

- `nth-child(even)`选择器对所有类型的元素都适用，而不仅仅是`li`元素。

- `nth-child(even)`选择器不仅限于选择偶数位置的元素，还可以选择满足其他条件的元素，例如`nth-child(2n + 3)`可以选择位置为3、5、7、9...的元素。

nth-child(even) 是 CSS 伪类选择器之一，用于选取父元素下的偶数位置的子元素。

示例：

HTML：

```

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

```

CSS：

```

li:nth-child(even) {

background-color: lightgray;

}

```

在上述示例中，nth-child(even) 选择器将选取父元素 ul 下的偶数位置的 li 子元素，并将它们的背景颜色设置为 lightgray。因此，将会为 Item 2、Item 4 和 Item 6 添加 lightgray 的背景颜色。

当使用 `nth-child(even)` 选择器时，它会选择父元素下的索引位置为偶数的子元素。选择器中的参数 `even` 表示偶数。

该选择器使用基于1的索引来确定子元素的位置。假设父元素下有6个子元素，它们的索引分别为1、2、3、4、5、6，其中偶数索引位置的子元素为2、4、6。

以下是一些示例：

HTML：

```html

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

```

CSS：

```css

ul li:nth-child(even) {

background-color: lightgray;

}

```

在上述示例中，因为我们使用了 `nth-child(even)` 选择器，所以仅有的偶数位置的子元素 Item 2、Item 4 和 Item 6 会被选择，并将其背景颜色设置为 lightgray。

注意：

- `nth-child` 选择器基于元素在父元素中的位置，而不仅仅是元素的类型或类名。

- 在选择过程中，首先检查给定的元素是否是其父元素的第n个子元素，然后检查它是否满足所提供的条件。

当使用 `nth-child(even)` 选择器时，它会选择父元素下所有偶数位置的子元素。

例如，考虑如下的HTML结构：

```html

```

我们可以使用 `nth-child(even)` 选择器来选择奇数位置的子元素，并将它们的背景颜色设置为灰色：

```css

.parent p:nth-child(even) {

background-color: lightgray;

}

```

上述代码将选择 `.parent` 元素下的第2、第4和第6个子元素，并将它们的背景颜色设置为灰色。

注意：

- `nth-child(even)` 使用基于1的索引值，因此`even`表示偶数位置的子元素。

- 如果父元素下没有奇数位置的子元素，那么选择器将不会匹配任何元素。

- `nth-child` 选择器还可以接受其他参数，如 `nth-child(odd)`

表示选择奇数位置的子元素，`nth-child(n)` 表示选择所有子元素等。