TLDR:
基本定义：:first-child CSS 伪类表示在一组兄弟元素中的第一个元素。
当目标元素不是父元素的第一个子元素时，会失效。失效的场景：
<div>
<p>此文本已选中！</p>
<p>此文本未选中。</p>
</div>
<div>
<h2>此文本未被选中：它不是一个 `p`。</h2>
<p>此文本未被选中。</p>
</div>
<style>
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
解决方案可以尝试使用 :first-of-type。相应的针对 :last-child 也有 :last-of-type。
前言
在日常开发对列表类的数据进行样式设置的时候，往往会存在第一个或者最后一个的样式与其他的不同。比如第一个没有 margin-top , 最后一个没有 margin-bottom 此类的。
我们也会更多的使用 :first-child 或者 :last-child 或者 :not(:first-child) 此类的来为特殊的 item 设置专用样式，但是有些情况下不起作用。
问题复现及结论
如上所述，主要是因为在父容器中的第一个子项并不是期望的 p 标签，所以导致了这样的问题。
在问题排查的时候确实感觉很奇怪，不明白为什么自己的样式没有起到作用。
这里也是首先将 :first-child 的伪类去除掉，来看样式书写是否正确。
然后又查询到使用 :first-child 的需要注意到的点当目标元素不是父元素的第一个子元素时，会失效。这才想到使用 :first-of-type 来解决此类问题。
