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

//选择一个 是所有兄弟元素里面第一个并且是li元素
$("li:first-child").css('border','2px solid red');

//所有li兄弟元素里面的第一个
$("li:first-of-type").css('border','2px solid pink');

以下示例：

<ul>
        <li>123</li>
        <li>lorem
            <ol>
                <p>loersda</p>
                <li>456</li>
                <li>lorem5</li>
                <li>lorem5</li>
                <p>lasdasd</p>
                <li>lorem5</li>
                <p>sadadasd</p>
                <li>lorem5</li>
            </ol>
        </li>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
    </ul>
    <ul>
        <li>789</li>
    </ul>
  • :first-child 
$("li:first-child").css('border','2px solid red');

  • :first-of-type 
$("li:first-of-type").css('border','2px solid pink');