我们经常有需求需要查找第一个子元素，但是使用了:first-child后发现没有效果，其实是我们理解错了:first-child的用法

E::first-child { sRules }

解读：匹配同类型中的第一个同级兄弟元素E。
这里有个问题，当父元素的第一个子元素类型不是E类型时，会失效，如：

p:first-child{color:#f00;}

<div>
    <h2>我是一个标题</h2>
    <p>我是一个p</p>
</div>

你会发现，没有选中p元素，这是因为div的第一个子元素不是p类型的，而是h2，因此这种情况下我们应该使用

E:first-of-type { sRules }

解读：匹配同类型中的第一个同级兄弟元素E。
就可以了，同理 :last-child 也是一样的
后续
这里的同类型是指元素类型p,div,span等等与类名无关，不是同一类名就可以触发，必须是同类型