nth-child()
时间: 2024-06-22 11:00:33 浏览: 266
CSS3伪类选择器:nth-child()
5星 · 资源好评率100%
`nth-child()` 是 CSS 选择器的一种,它用于选取某个元素在其父元素中的特定子元素。这个选择器允许开发者根据元素在整个兄弟元素集合中的位置来选择元素,常用于实现动态布局或者复杂的样式规则。
基本语法格式如下:
```css
selector:nth-child(n)
```
- `selector`:你想要应用样式的元素。
- `n`:一个数值,可以是数字(例如,`:nth-child(2)` 选中第二个子元素),也可以是 `even` 或 `odd` 表示偶数或奇数索引,还可以使用像 `last-child`、`first-child` 这样的关键字。
例如:
```css
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 开始)。
阅读全文