: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');