前端常見bug系列1：容易被誤解的:last-child和:first-child

用某個選擇器過濾出來一個元素集合，當我們想選中最後一個元素的時候，是不是很容易想到:last-child？比如，有下面一段CSS和HTML片段：

<style>
        .section{
            margin-bottom: 50px;
        }

        .section1-item:last-child{
            color: blue;
        }
</style>

<section class="section section1">
        <header>header</header>
        <p class="section1-item card">111</p>
        <p class="section1-item card">222</p>
        <p class="section1-item card">333</p>
        <p class="section1-item card">444</p>
        <footer>footer</footer>
</section>

本來是想選中<p class="section1-item card">444</p>給它設定顏色為藍色的，結果什麼也沒有發生。為什麼？

檢視W3C的相關介紹：

The :last-child pseudo-class represents an element that is the last child of some other element.

someselecttor:last-chid 所表示的是，如果someselecttor所選中的某個節點恰好是其父元素的最後一個直接子節點，那麼該選擇器生效。而不是表示someselecttor選中的節點集合的最後一個。

同理，我們馬上可以想到，:first-child是不是也有類似問題？新增一句樣式.section1-item:last-child{ color: red; }到上面的例子中一試就知道，問題果然存在。

someselecttor:first-chid 所表示的是如果someselecttor所選中的某個節點恰好是其父元素的第一個直接子節點，那麼該選擇器生效。