jquery選擇器:first-child與:last-child取得不到元素解決辦法

下面我們透過實際的程式碼範例來介紹如何解決這個問題，假如我們有以下的HTML程式碼

<a href="#" class="button"><</a>
<a href="#" class="button">></a>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>

我們需要找出最後一個有類別button的a標籤，那麼根據我們所了解的CSS3偽類，可以輕鬆的編寫出下面的程式碼

.button:last-child {
    background-color: #ffd700;
}

運行後發現，第二個a的背景顏色並沒有變色，想了想CSS程式碼肯定沒錯，一定是HTML哪裡有問題，經過幾次修改之後發現,HTML和CSS改成這樣就可以了。

<div>
<a href="#" class="button"><</a>
<a href="#" class="button">></a>
</div>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>
<style>
div .button:last-child {
    background-color: #ffd700;
}
</style>

這時我才恍然大悟，first-child與last-child這2個果然很傲嬌很任性，如果父親元素裡的子元素有包含其他不一樣的標籤時，他們2個是很不聽話的。

總結

那麼他們究竟哪些話聽哪些話不聽了，經過我一番測試得出的結論是

當使用first的話，第一個子元素一定要是一樣的標籤。中間和最後可以不一樣，
last則反之，最後一個元素要一樣，前面和中間可以不一樣

以上是雲棲社區小編為您精心準備的的內容，在雲棲社群的部落格、問答、公眾號、人物、課程等欄位也有的相關內容，歡迎繼續使用右上角搜尋按鈕進行搜尋css ，標籤代碼firstchild lastchild、jquery last child 、jquery firstchild、jquery first child、jquery first last，以便於您獲得更多的相關知識。

以上是jquery選擇器:first-child與:last-child取得不到元素解決辦法的詳細內容。更多資訊請關注PHP中文網其他相關文章！