nth-child（）

`nth-child()` 是 CSS 选择器的一种，它用于选取某个元素在其父元素中的特定子元素。这个选择器允许开发者根据元素在整个兄弟元素集合中的位置来选择元素，常用于实现动态布局或者复杂的样式规则。

基本语法格式如下：

selector:nth-child(n)

- `selector`：你想要应用样式的元素。
- `n`：一个数值，可以是数字（例如，`:nth-child(2)` 选中第二个子元素），也可以是 `even` 或 `odd` 表示偶数或奇数索引，还可以使用像 `last-child`、`first-child` 这样的关键字。

例如：

li:nth-child(odd) {
  background-color: lightgray;
}

div:nth-child(2) {
  font-weight: bold;
}

在这里，`li:nth-child(odd)` 会选择所有的 `<li>` 元素中索引为奇数的项，而 `div:nth-child(2)` 则会选择第一个 `<div>` 子元素（因为 CSS 的计数从 1 开始）。

相关问题

first-child last-child nth-child

`first-child`, `last-child`, 和 `nth-child` 是 CSS 选择器，它们用于选取 HTML 元素集合中的特定元素。

1. **first-child**: 这个选择器匹配列表（如有序列表 `<ol>` 或无序列表 `<ul>`) 中的第一个子元素。它只对那些有兄弟元素的元素生效，如果某个元素是列表的第一个项目，那么它就是 `first-child`。

2. **last-child**: 类似地，`last-child` 匹配列表中的最后一个子元素。同样，这个选择器仅对有兄弟元素的元素起作用。

3. **nth-child**: 这是一个更通用的选择器，它可以指定元素在父元素中是第几个孩子。例如，`:nth-child(2)` 会匹配所有元素的第二个子元素，`:nth-child(even)` 则匹配所有的偶数索引位置的元素，`:nth-child(odd)` 则匹配奇数索引位置的元素。

这些选择器常用于布局调整、样式应用等场景，可以根据元素的位置关系动态改变样式的呈现。

nth-child 和nth-type

感谢您的提问！

"nth-child" 和 "nth-of-type" 都是 CSS 选择器中的伪类选择器，用于选择父元素的特定子元素。

其中，“nth-child”选择器可以匹配父元素中所有的子元素，而“nth-of-type”选择器只会匹配父元素中相同类型的子元素。

两种选择器的使用方法如下：

1. nth-child(n)

“nth-child”选择器可以使用一个整数参数 n，表示要选择父元素中第 n 个子元素。例如，要选择一个列表中的第三个列表项，可以使用以下代码：

ul li:nth-child(3) {
    /* 样式规则 */
}

这将选择 `ul` 元素下的第三个 `li` 元素。

2. nth-of-type(n)

“nth-of-type”选择器与“nth-child”类似，但只匹配父元素中相同类型的子元素。例如，要选择一个段落中的第二个加粗文本，可以使用以下代码：

p strong:nth-of-type(2) {
    /* 样式规则 */
}

这将选择 `p` 元素下的第二个 `strong` 元素。

希望这个简要的回答能够帮助您。如有任何问题或需要进一步解释，请随时让我知道！