jQuery :nth-child() 選擇器

2018-11-21 14:31 更新

jQuery :nth-child() 選擇器

jQuery 選擇器 jQuery 選擇器

實(shí)例

選取屬于其父元素的第三個(gè)子元素的每個(gè) <p> 元素:

$("p:nth-child(3)")

嘗試一下 ?

定義和用法

:nth-child(n) 選擇器選取屬于其父元素的不限類(lèi)型的第 n 個(gè)子元素的所有元素。

提示:請(qǐng)使用 :nth-of-type() 選擇器來(lái)選取屬于其父元素的不限類(lèi)型的第 n 個(gè)子元素的所有元素。


語(yǔ)法

:nth-child(n|even|odd|formula)

參數(shù) 描述
n 要匹配的每個(gè)子元素的索引。

必須是一個(gè)數(shù)字。第一個(gè)元素的索引號(hào)是 1。
even 選取每個(gè)偶數(shù)子元素。
odd 選取每個(gè)奇數(shù)子元素。
formula 規(guī)定哪個(gè)子元素需通過(guò)公式 (an + b) 來(lái)選取。
實(shí)例:p:nth-child(3n+2) 選取每個(gè)第三段,從第二個(gè)子元素開(kāi)始。


實(shí)例

嘗試一下 - 實(shí)例

選取所有 <div> 元素的第二個(gè)子元素的每個(gè) <p> 元素
如何選取所有 <div> 元素的第二個(gè)子元素的每個(gè) <p> 元素。

使用公式 (an + b)
如何使用公式 (an + b) 來(lái)選取不同的子元素。

使用"偶數(shù)"和"奇數(shù)"
如何使用偶數(shù)和奇數(shù)來(lái)選取不同的子元素。

:nth-child()、:nth-last-child()、:nth-of-type() 和 :nth-of-last-type() 之間的不同
p:nth-child(2)、p:nth-last-child(2)、p:nth-of-type(2) 和 p:nth-of-last-type(2) 之間的不同。


jQuery 選擇器 jQuery 選擇器

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)