css3nth-child

css3中的:nth-child选择器用于选取元素在其父元素中的特定位置。

:nth-child(n)选择器选取父元素中第n个子元素。其中n可以为一个具体的数字，也可以是表达式，如2n-1表示奇数位置，2n表示偶数位置。下面是一些常见的用法示例：

1. 选择第n个子元素

```

.parent div:nth-child(2) {

color: green;

}

```

上述代码表示选取父元素下的第二个子元素，并将其颜色设置为绿色。

2. 选择所有偶数位置的子元素

```

.parent div:nth-child(2n) {

background-color: lightgrey;

}

```

这段代码会获取父元素下所有偶数位置的子元素，并将其背景颜色设置为浅灰色。

3. 选择奇数位置的子元素

```

.parent div:nth-child(2n-1) {

background-color: lightpink;

}

```

这段代码会获取父元素下所有奇数位置的子元素，并将其背景颜色设置为淡粉色。

4. 选择*一个子元素

```

.parent div:nth-child(n):last-child {

border-bottom: 1px solid black;

}

```

上述代码表示选取父元素下的*一个子元素，并在其下方添加一条黑色的下边框。

5. 选择*个子元素

```

.parent div:nth-child(n):first-child {

border-top: 1px solid black;

}

```

这段代码表示选取父元素下的*个子元素，并在其上方添加一条黑色的上边框。

注意，:nth-child选择器只会选取符合条件的子元素，不会考虑其它因素。因此，如果父元素下有其他类型的元素，比如文本节点或注释节点，:nth-child选择器会跳过这些非元素节点。

此外，:nth-child选择器还可以与其他选择器进行组合使用，以进一步缩小选取范围。例如，可以将其与类选择器、属性选择器等结合使用。

总结：:nth-child选择器是CSS3中常用的一种选择器，用于按照元素在父元素中的位置来对元素进行选择和样式设置。通过指定具体的位置，或通过表达式选择奇偶位置等，可以很灵活地对页面中的元素进行定位和样式设置。通过合理的运用，可以使CSS的编程更加便捷高效。