1. 程式人生 > >關於:nth-children 的幾點總結

關於:nth-children 的幾點總結

pos 冒號 col font com add p標簽 img body

1、這是w3school上的解釋:

  技術分享圖片

2、自己的jq編程例子中

  技術分享圖片

技術分享圖片

在24 行中是$("div :nth-child(1)").addClass("c4");,

運行效果:

  技術分享圖片

所以在此處可以理解為$("div :nth-child(1)").addClass("c4");是:

  選取div,然後給它下面的“所有的”第一個子元素添加背景色

  引號中所有的,的意思是,只要是第一個子元素都選中,而不是選取div的第一個子元素,這裏的div是確定我們選擇的範圍,是在div裏面

3、第二個編程實例是

  技術分享圖片

這裏的p:nth-child(2) 理解為

  選取是其父元素的第二個子元素的p標簽

技術分享圖片

當吧代碼改成上圖,即在p與冒號間添加一個空格,運行效果為:

技術分享圖片

 理解為:選取P,再選取其第一個子元素。

總結,

在css3中:註意有無空格,差別很大,有空格時,當做兩個有先後順序的條件,

在jq中,不管有無空格都與css3的有空格一樣(即:當做有先後關系的兩個條件)

關於:nth-children 的幾點總結