常用伪类选择器之 :last-child()、:first-child()、nth-child()、:nth-of-type()

在CSS中，常规选择器可以根据元素的类型、类、ID、指定的属性，或者它们的父级或子级进行选择。与常规选择器不同，伪类选择器可以根据元素的状态或位置，而不是它们的属性或标签名称来选择元素。在伪类选择器中，:nth-child、:last-child、:first-child、:nth-of-type()是其中比较常用的几个。(下面所有例子中HTML都假设是类似于这样的结构：)

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <p class="paragraph">Paragraph 1</p>
  <p class="paragraph">Paragraph 2</p>
</div>

1. :nth-child

:nth-child()选择器用于选取一个元素的父级元素下的某个位置的子元素。在括号内输入数字n即可，它表示选中父元素下的第n个子元素，包含所有元素，而不管它的类型。

例如，要选择container下的第二个子元素可以使用如下代码：

.container :nth-child(2) {
    background-color: green;
}

这个选择器将会选择container下的所有子元素中排在第二位的那一个元素（在这个例子中，它是一个具有.box类名的div元素）。

2. :last-child

:last-child选择器匹配父元素下的最后一个子元素。下面的示例将container下的最后一个元素（一个Paragraph 2）设置为蓝色。

.container :last-child {
   color: blue;
}

3. :first-child

:first-child选择器匹配父元素下的第一个子元素。下面的示例将container下的第一个元素（一个具有.box类名的div元素）设置为红色。

.container :first-child {
   color: red;
}

4. :nth-of-type()

与:nth-child()不同，:nth-of-type()只会匹配与指定类型相符的元素。例如，下面这些代码会将container中的奇数段落字体变为绿色：

.container p:nth-of-type(odd) {
  color: green;
}

此代码首先选择容器中的所有段落元素。然后，它只选中那些是奇数的。这个选择方法可以使用在需要排除某些特定类型的元素所处的情况。

不同的选择器的适用场景有所不同。有些情况下，CSS中的选择器可以互换使用。例如，如果你想设置某个元素的颜色，你既可以选择:nth-child()又可以选择:nth-of-type()。但是，在某些情况下，选择器之间的差异就非常重要了。例如，如果你想给两个不同类型的元素添加不同的样式，你应该使用以类型名为基础的选择器，如:first-of-type、:nth-of-type()。如果你想基于它们在DOM中出现的位置来选择元素，比如第一个子元素或最后一个子元素，你应该使用:first-child、:last-child选择器。