CSS 选择器：精准操控元素，巧用 :nth-of-type() 与 :nth-child()

CSS 中的 :nth-of-type() 和 :nth-child() 选择器：精细控制页面布局和样式

一、选择器在 CSS 中的重要性

在浩瀚的 CSS 海洋中，选择器扮演着不可或缺的角色。它们赋予我们精确定位页面元素的超能力，让我们能够根据特定的标准对元素进行样式控制。而 :nth-of-type() 和 :nth-child() 选择器更是其中的佼佼者，它们可以轻松选中特定类型的第 N 个子元素，帮助我们实现更加精细化的页面布局和样式控制。

二、:nth-of-type()：精准匹配特定类型子元素

:nth-of-type() 选择器根据元素在父元素中同类元素中的顺序进行选择。它的语法格式为：

:nth-of-type(n) {
  /* 样式代码 */
}

其中，n 表示要匹配的子元素在同类元素中的顺序，例如：

• :nth-of-type(1) 匹配父元素中的第一个同类元素
• :nth-of-type(2) 匹配父元素中的第二个同类元素
• :nth-of-type(3) 匹配父元素中的第三个同类元素

三、:nth-child()：匹配父元素的第 N 个子元素

:nth-child() 选择器根据元素在父元素中的整体子元素顺序进行选择。它的语法格式为：

:nth-child(n) {
  /* 样式代码 */
}

其中，n 表示要匹配的子元素在父元素中的整体顺序，例如：

• :nth-child(1) 匹配父元素中的第一个子元素
• :nth-child(2) 匹配父元素中的第二个子元素
• :nth-child(3) 匹配父元素中的第三个子元素

需要注意的是，:nth-child() 选择器会匹配所有类型的子元素，而不仅仅是特定类型的子元素。

四、:first-child 和 :last-child：便捷选择首末子元素

除了 :nth-of-type() 和 :nth-child() 之外，CSS 还提供了两个更加便捷的伪类选择器：:first-child 和 :last-child。它们分别用于匹配父元素中的第一个子元素和最后一个子元素。

其语法格式分别为：

:first-child {
  /* 样式代码 */
}

:last-child {
  /* 样式代码 */
}

五、案例：让 CSS 动起来

为了更生动地展示这些选择器的强大功能，我们来看一个实战案例：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

要为奇数项的

#list li:nth-child(odd) {
  background-color: blue;
}

#list li:first-child, #list li:last-child {
  border: 1px solid red;
}