第一个孩子和第一个孩子之间有什么区别？
我不能区分element:first-child和element:first-of-type
比如说，你有一个div
div:first-child
→所有<div>元素是其父项的第一个子项。
div:first-of-type
→所有<div>元素是其父元素的第一个<div>元素。
这似乎是完全一样的东西，但他们的工作方式不同。
有人可以解释吗？
父元素可以有一个或多个子元素：
<div class="parent"> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> </div>
在这些孩子中，只有其中一个可以成为第一个。 这是匹配:first-child ：
<div class="parent"> <div>Child</div> <!-- :first-child --> <div>Child</div> <div>Child</div> <div>Child</div> </div>
:first-child和:first-of-type之间的区别在于:first-child :first-of-type将匹配其元素types的第一个元素，即HTML中的第一个元素由其标记名称表示， 即使该元素不是第一个元素父母的孩子 。 到目前为止，我们所看到的孩子元素都是div ，但是忍耐着我，我会稍微了解一下。
就目前而言，反过来也是如此：任何:first-child也是:first-of-type是必要的。 由于这里的第一个孩子也是第一个div ，它将匹配两个伪类，以及typesselect器div ：
<div class="parent"> <div>Child</div> <!-- div:first-child, div:first-of-type --> <div>Child</div> <div>Child</div> <div>Child</div> </div>
现在，如果将第一个孩子的types从div更改为其他types，比如h1 ，它仍然是第一个孩子，但它不再是第一个div ; 相反，它成为第一个（也是唯一） h1 。 如果在同一父元素中的第一个子元素之后还有任何其他div元素，那么这些元素中的第一个将会匹配div:first-of-type 。 在给定的例子中，第二个孩子成为第一个孩子变成h1之后的第一个div ：
<div class="parent"> <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个子元素，它可以并且将有多less个孩子匹配:first-of-type伪类作为子types的数量具有。 在我们的示例中，select器.parent > :first-of-type （具有隐式*限定:first-of-type伪）将匹配两个元素，而不仅仅是一个：
<div class="parent"> <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同样适用：any :last-child也是必须的:last-of-type ，因为在父:last-of-type绝对不会有其他元素跟随它。 然而，由于最后一个div也是最后一个孩子，所以h1不能是最后一个孩子，尽pipe是最后一个孩子。
我已经创build了一个例子来展示这里的first-child和first-of-type first-child之间的区别。
HTML
<div class="parent"> <p>Child</p> <div>Child</div> <div>Child</div> <div>Child</div> </div>
CSS
.parent :first-child { color: red; } .parent :first-of-type { background: yellow; } .parent p:first-child { text-decoration: line-through; } // Does not work .parent div:first-child { font-size: 20px; } // Use this instead .parent div:first-of-type { text-decoration: underline; } // This is second child regardless of its type .parent div:nth-child(2) { border: 1px black solid; }
要查看完整的示例，请访问https://jsfiddle.net/bwLvyf3k/1/
