父元素可以具有一个或多个子元素：
<div > <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div></div>
在这些孩子中，只有一个可以成为第一个。与之匹配
:first-child：
<div > <div>Child</div> <!-- :first-child --> <div>Child</div> <div>Child</div> <div>Child</div></div>
:first-child和之间的区别
:first-of-type是，
:first-of-type它将匹配其元素类型的第一个元素，该元素类型在HTML中由其标记名表示， 即使该元素不是parent的第一个子元素也是如此
。到目前为止，我们正在查看的子元素全部为
divs，但是请耐心等待，我将稍作介绍。
就目前而言，反过来也成立：任何事情
:first-child都是
:first-of-type必要的。由于这里的第一个孩子也是第一个孩子
div，它将匹配 两个 伪类以及类型选择器
div：
<div > <div>Child</div> <!-- div:first-child, div:first-of-type --> <div>Child</div> <div>Child</div> <div>Child</div></div>
现在，如果您将第一个孩子的类型从更改为
div其他名称，例如
h1，它将仍然是第一个孩子，但
div显然不再是第一个孩子。相反，它成为第一个（也是唯一一个）
h1。如果
div在同一个父对象中的第一个孩子之后还有其他元素，则这些
div元素中的第一个将匹配
div:first-of-type。在给定的示例中，在第
div一个孩子更改为之后，第二个孩子成为第一个孩子
h1：
<div > <h1>Child</h1> <!-- h1:first-child, h1:first-of-type --> <div>Child</div> <!-- div:nth-child(2), div:first-of-type --> <div>Child</div> <div>Child</div></div>
请注意，这
:first-child等效于
:nth-child(1)。
这也意味着，尽管任何元素一次只能具有一个匹配的子元素
:first-child，但与
:first-of-type伪类匹配的子元素数目可以和将会具有的子元素数目一样多。在我们的示例中，选择器
.parent > :first-of-type（具有隐式
*限定
:first-of-type伪数）将匹配 两个 元素，而不仅仅是一个：
<div > <h1>Child</h1> <!-- .parent > :first-of-type --> <div>Child</div> <!-- .parent > :first-of-type --> <div>Child</div> <div>Child</div></div>
对于
:last-child和
:last-of-type：
:last-child也是同样的道理
:last-of-type，因为必然没有任何其他元素在其父元素之内，因此任何也是必要的。但是，因为最后一个
div也是最后一个孩子，所以
h1即使它是最后一个孩子，也不能成为最后一个孩子。
:nth-child()与
:nth-of-type()任意整数参数（如上述
:nth-child(1)示例）一起使用时，和原理上的功能非常相似，但它们之间的区别在于匹配的元素的潜在数量
:nth-of-type()。这在详细覆盖的第n个孩子（2）和P：第n-的式（2）什么是P之间的区别？
