首頁 > web前端 > html教學 > 關於first-child的一個小知識點

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

零下一度
發布: 2017-06-24 13:58:49
原創
1606 人瀏覽過

今天在看《鋒利的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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板