選擇器 子元素

2021-06-27 12:12:10 字數 1113 閱讀 7933

匹配其父元素下的第n個子或奇偶元素

':eq(index)' 只匹配乙個元素,而這個將為每乙個父元素匹配子元素。:nth-child從1開始的,而:eq()是從0算起的!可以使用:

nth-child(even)

:nth-child(odd)

:nth-child(3n)

:nth-child(2)

:nth-child(3n+1)

:nth-child(3n+2)

index

要匹配元素的序號,從1開始

描述:在每個 ul 查詢第 2 個li

html **:

jquery **:
$("ul li:nth-child(2)")
結果:
[ karl,   tane ]

匹配第乙個子元素

':first' 只匹配乙個元素,而此選擇符將為每個父元素匹配乙個子元素

描述:在每個 ul 中查詢第乙個 li

html **:

jquery **:
$("ul li:first-child")
結果:
[ john, glen ]

匹配最後乙個子元素

':last'只匹配乙個元素,而此選擇符將為每個父元素匹配乙個子元素

描述:在每個 ul 中查詢最後乙個 li

html **:

jquery **:
$("ul li:last-child")
結果:
[ brandon, ralph ]

如果某個元素是父元素中唯一的子元素,那將會被匹配

如果父元素中含有其他元素,那將不會被匹配。

描述:在 ul 中查詢是唯一子元素的 li

html **:

jquery **:
$("ul li:only-child")
結果:
[ glen ]

屬性選擇器,子元素選擇器,偽元素選擇器筆記

屬性選擇器 屬性名稱 屬性名稱 屬性值 子元素選擇器 第n個子元素 元素 nth child 1 最後乙個子元素 元素 last child 全部子元素 test test2 直接子元素 test test2 選擇後面的乙個元素 test div 選擇後面的多個元素 test div偽元素 通過cs...

後代選擇器和子元素選擇器

1.後代選擇器和子元素選擇器之間的區別?1.1 後代選擇器使用空格作為連線符號 子元素選擇器使用 作為連線符號 1.2 後代選擇器會選中指定標籤中,所有的特定後代標籤,也就是會選中兒子 孫子 只要是被放到指定標籤中的特定標籤都會被選中 子元素選擇器只會選中指定標籤中,所有的特定的直接標籤,也就是只會...

CSS 子元素選擇器

與後代選擇器相比,子元素選擇器 child selectors 只能選擇作為某元素子元素的元素。如果您不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器 child selector 例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫 ...