使用:nth-child(n)-css3:nth-child()选择器选择同级别下的第n个元素

CSS3中的nth-child()选择器

CSS3的nth-child()选择器是一种用于选择同级元素的选择器，它可以用来选择第n个元素。它可以用来实现一些比较复杂的布局效果，比如实现三列布局，每一行的第一个和一个元素的样式不同，以及一些更复杂的布局效果。

使用nth-child()选择器

使用nth-child()选择器来选择第n个元素，语法格式如下：

element:nth-child(n) {
    // 样式定义
}

其中，element表示要选择的元素，n表示要选择的元素的索引，从1开始计数。例如，下面的代码可以用来选择第一个元素：

element:nth-child(1) {
    // 样式定义
}

nth-child()选择器还支持一些特殊的值，比如odd表示奇数，even表示偶数，也可以使用公式表示，比如2n表示偶数，3n+1表示第一个元素，3n+2表示第二个元素，以此类推。

实例

下面是一个实例，实现一个三列布局，每一行的第一个元素和一个元素的样式不同：

.container {
    display: flex;
}

.container > div:nth-child(1) {
    background-color: #ccc;
}

.container > div:nth-child(3n+1) {
    background-color: #ccc;
}

上面的代码中，我们使用了nth-child()选择器来选择第一个元素和每三个元素中的第一个元素，并为它们设置了不同的样式。

CSS3的nth-child()选择器可以用来选择同级元素中的第n个元素，这样可以实现一些比较复杂的布局效果，比如实现三列布局，每一行的第一个和一个元素的样式不同，以及一些更复杂的布局效果。