關於first-child的一個小知識點

今天在看《鋒利的jQuery》這書時，看到過濾選擇器那一節。有個知識點引起了我的注意。

 

（我不用書裡一模一樣的程式碼做範例）舉個簡單的例子-程式碼：

1 <ul>2     <li>第一个li</li>3     <li>第二个li</li>4     <li>第三个li</li>5     <li>第四个li</li>6 </ul>

如果要第一個li的顏色為藍色，書中給的方法是$("ul :first-child").css("color","blue");

（ps:我用的是在線引入的jQuery：）

#這時我的第一個反應是$("ul :first-child")這句話選的是ul吧，不是他兒子li。我現在網路找了下例子，發現大家普遍這情況下的寫法是：$("ul li:first-child").

那麼書上的寫法是錯的麼？我在編輯器上試驗了一下，發現也是對的，原來關鍵問題出現在$("ul :first-child")##的ul後面有個空格！如果空格拿掉的話就真的選擇了ul了！

額。 。 。這細節。 。 。 。以後用ul+空格好呢，還是ul li好呢，這個看需要了哈哈。畢竟$("ul :first-child")與$("ul li:first-child")相比還多了個li！條件更加苛刻了！改下例子

<ul> <p>lala</p> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li></ul>

同樣情況下，$("ul :first-child").css("color","blue")與$("ul li:first-child").css("color","blue")，前者lala變成藍色了，後者沒有效果，畢竟li不是第一個兒子（做不了王子哈哈） 。

first-child和first-of-type，額，看到被人寫的文章，說的蠻清楚的，附上地址：

嗯，簡單來說，前者說的是兒子的事，後者說的是同一元素組成一組，這組中第幾個的事。加上我前面說的注意空格的情況就可以清楚了。

以上是關於first-child的一個小知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！