CSS:first-child 和 nth-child 的区别及用法详解
时间: 2024-08-16 18:02:42 浏览: 44
`first-child` 和 `nth-child` 都是 CSS 伪类选择器,用于选取HTML元素中的特定位置的子元素,但它们的功能和用法略有不同:
1. **`:first-child`**:
- 描述:这个选择器匹配某个元素的第一个子元素。这意味着只有当元素有一个直接的子元素时,它才会应用样式。
- 示例:`.parent :first-child { color: red; }` 会选择`.parent`下第一个直接子元素并改变其颜色。
- 注意:如果`.parent`是一个空元素(如`<div>`),`first-child`不起作用。
2. **`:nth-child(n)`**:
- 描述:这个选择器匹配所有具有指定序数的子元素。`n`可以是一个数字、关键字(如even/odd)、公式(如`2n+1`)等,表示第几个子元素应该匹配。
- 示例:`.parent :nth-child(2) { background-color: yellow; }` 会选中`.parent`下的第二个子元素设置背景色。
- 特别地,`:nth-child(even)`和`:nth-child(odd)`分别选取偶数索引和奇数索引的子元素。
使用场景上,`first-child`通常用于针对列表项、导航链接或其他有明确开始位置的情况,而`nth-child`则更适用于需要基于任意顺序选择元素的动态布局。
阅读全文