jqueryセレクター:firstと:first-childの違いについての簡単な説明

例:

<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

first は (すべての親要素を結合した後の) 最初のものを意味します。 first-child は (各親要素の) 最初のものを意味します

$('ul li:first') に戻るジョンがいるリー。すべての ul

$("ul li:first-child") の下で最初の li 要素を検索すると、john glen が返されます。 各 ul の下の最初の要素、つまり li 要素と dom 要素を見つけます。

拡張された使用法: $("body *:first") は body の下の最初の子要素を表します; $("body *:first-child") は body の下の最初の子要素であるすべての要素を表します

また、CSSそうであれば、セレクターは右から左に進みます。

<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 
<div>DIV</div>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

Then $("ul li:first-child") は、li 要素が一致する場合にのみ John を返します。そうでない場合は、それが返されます。一致しません。

$('li:first') は最初の li 要素と一致します $("li:first-child") は、特定の要素の子要素の最初である最初の li 要素と一致します