我們?cè)陂_(kāi)發(fā)時(shí)，經(jīng)常會(huì)使用到結(jié)構(gòu)性偽類選擇器，如 first-child（選擇第一個(gè)子元素），但有時(shí)候并沒(méi)有效果怎么辦？

這時(shí)候你可以檢查一下該元素是否有其他兄弟元素。因?yàn)楫?dāng)父元素的第一個(gè)子元素類型和該元素不同時(shí)，會(huì)失效。

場(chǎng)景舉例：

<!--內(nèi)容部分--> <div class="fruits"><h3>熱銷(xiāo)水果</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;}

最后效果：

說(shuō)明：可以看出最后一行樣式?jīng)]有起效果，原因就是P元素前面有其他元素(H3)。

解決方法一：因?yàn)閜元素后面沒(méi)有其他元素了，可以將 first-child 選擇器改為?last-child 選擇器（同時(shí)要將border-bottom改為border-bottom）

解決方法二：用一個(gè)div標(biāo)簽將所有的p元素包起來(lái)。如下：

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

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

希望能幫助到大家！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。