我們在開發時，經常會使用到結構性偽類選擇器，如 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>

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

希望能幫助到大家！

總結

以上是生活随笔為你收集整理的first-child伪类选择器没有效果(不起作用)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。