首頁  >  選擇器  > :first-of-type

返回值:jQuery :first-of-type

V1.9 概述

結構化偽類,匹配E的父元素的第一個E型別的孩子。等價于 :nth-of-type(1) 選擇器。

解釋的很模糊,網上搜了很多都是扯淡的解釋,作者也只能自己一個個試,試了幾十次才弄的稍微有點清楚,如果錯了,慢點拍磚,怕怕。直接看示例。

描述:

查詢作為父元素的span型別子元素中的"長子"的span標籤

HTML 程式碼:

<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>

</div>

jQuery 程式碼:

$("span:first-of-type");
結果:

//n4雖然不是n2的第一個子元素,但它是n2所有span型別子元素中的第一個,因此可以匹配
[<span id="n4">span1</span>,<span id="n8" class="abc">span1</span>]
HTML 程式碼:

<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>

</div>

jQuery 程式碼:

$(".abc:first-of-type");
結果:

//.abc可以匹配id分別為n2、n5、n8的3個元素,n2是n1所有div型別子元素中的第一個,n8是n7所有span型別子元素中的第一個,但n5不是n2所有span型別子元素中的第一個,因此不能匹配n5。
[<div id="n2" class="abc">,<span id="n8" class="abc">span1</span>]