first-child和first-of-type的区别

直接上代码

// html
<div class="type">
    <p>1</p>
    <h1>2</h1>
    <span>s1</span>
    <span>s2</span>
</div>

//js

 // first-child
    console.log($('.type p:first-child').html()) // 1
    console.log($('.type h1:first-child').html()) // undefined
    console.log($('.type span:first-child').html()) // undefined

    // first-of-type
    console.log($('.type p:first-of-type').html()) // 1
    console.log($('.type h1:first-of-type').html()) // 2
    console.log($('.type span:first-of-type').html()) // s1