first-child僞類選擇器沒有效果(不起作用)

我們在開發時，經常會使用到結構性僞類選擇器，如 first-child（選擇第一個子元素），但有時候並沒有效果怎麼辦？

這時候你可以檢查一下該元素是否有其他兄弟元素。因爲當父元素的第一個子元素類型和該元素不同時，會失效。

場景舉例：

<!--內容部分-->
<div class="fruits">
    <h3>熱銷水果</h3>
    <p>鮮紅透亮的櫻桃</p>
    <p>晶瑩剔透的提子</p>
    <p>脆甜多汁的西瓜</p>
</div>

/* 樣式部分 */
.fruits{width:180px;padding: 20px;text-align: center;}
.fruits h3{font-size: 18px;color: limegreen;padding-bottom: 10px;}
.fruits p{padding:10px 0;border-top: 1px solid #cccccc;}
.fruits p:first-child{border-top: none;}

最後效果：

說明：可以看出最後一行樣式沒有起效果，原因就是P元素前面有其他元素(H3)。

解決方法一：因爲p元素後面沒有其他元素了，可以將 first-child 選擇器改爲 last-child 選擇器（同時要將border-bottom改爲border-bottom）

解決方法二：用一個div標籤將所有的p元素包起來。如下：

<!--內容部分-->
<div class="fruits">
    <h3>熱銷水果</h3>
    <div>
        <p>鮮紅透亮的櫻桃</p>
        <p>晶瑩剔透的提子</p>
        <p>脆甜多汁的西瓜</p>
    </div>
</div>

最後得到我們想要的效果，如下：

希望能幫助到大家！