first-child、last-child

很多人对last-child和first-child选择器有着很深的误会，以为匹配的是“所有符合匹配规则（:之前）的平级元素中的第一\最后一个”。
实际上fitst-child、last-child的匹配规则是这样的：

1. 找到符合:之前选择器匹配规则的元素
2. 找到元素的全部平级元素中的第一个或最后一个
3. 判断第一个或最后一个元素时候符合：之前选择器的匹配规则

这样解释有些难懂，所以举例如下：

    <div>
        <div id="div1 div">div1</div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <div id="div2 div">div2</div>
    </div>

    <style>
        p:first-child {
            什么也没有匹配到，因为p1不是first-child，div1又不是p元素
        }
        p:last-child {
            什么也没有匹配到，与p:first-child一个道理
        }
        .div:first-child {
            匹配到div1
        }
        .div:last-child {
            匹配到div2
        }
    </style>

线上例子：https://jsfiddle.net/ndNovaDev/7j151x6x/4/