CSS 选择器 :nth-child()

简介

:nth-child() 是一个 CSS 伪类选择器，用于匹配其父元素的第 n 个子元素。这个选择器非常强大，因为它允许你根据位置选择元素，而不仅仅是根据类型或属性。

基本语法

:nth-child(an + b) 的基本语法如下：

selector:nth-child(an + b) {
    /* 属性声明 */
}

其中：

• a 和 b 是整数。
• n 是从 0 开始计数的变量。

示例

选择奇数行

要选择所有奇数行的元素，可以使用以下代码：

tr:nth-child(2n+1) {
    background-color: #f2f2f2;
}

选择偶数行

要选择所有偶数行的元素，可以使用以下代码：

tr:nth-child(2n) {
    background-color: #e6e6e6;
}

选择特定位置的元素

要选择特定位置的元素，例如选择第 3 个子元素，可以使用以下代码：

li:nth-child(3) {
    color: red;
}

使用负值和零

虽然通常 n 从 0 开始，但你可以通过调整 a 和 b 的值来选择不同的位置。例如：

div:nth-child(-n+3) {
    border: 1px solid black;
}

这段代码会选择前三个子元素，并给它们添加边框。

使用关键字

除了使用公式外，还可以使用一些关键字来简化选择器：

• odd：选择所有奇数位置的子元素。
• even：选择所有偶数位置的子元素。

li:nth-child(odd) {
    font-weight: bold;
}

li:nth-child(even) {
    font-style: italic;
}

复杂的选择器

:nth-child() 也可以与其它选择器结合使用，以实现更复杂的选择效果。

结合类选择器

div.some-class:nth-child(2) {
    padding: 10px;
}

这段代码会选择带有 some-class 类的第二个子元素，并给它添加内边距。

结合属性选择器

input[type="text"]:nth-child(3) {
    width: 200px;
}

这段代码会选择父元素中的第三个子元素，并且该子元素是文本输入框。

总结

:nth-child() 是一个非常强大的选择器，它允许你根据元素的位置来选择元素，这使得你可以灵活地控制页面上的样式。通过组合不同的选择器和使用关键字，你可以创建出非常复杂的样式规则。