層級

• ancestor descendant 找到（ancestor）中所有的子子孫孫（descendant）元素
• parent > child 匹配（parent）中所有的子級（child）元素
• prev + next 匹配所有跟在、緊挨著（prev）後面的（next）元素
• prev ~ siblings 找到所有與（prev）同輩的（siblings）元素

1、ancestor descendant與parent > child的區別

HTML 程式碼:

<form>
  <label>Name:</label>
  <input
 
 name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 程式碼:$("form input") 結果:[ <input name="name" />, <input name="newsletter" /> ]
jQuery 程式碼:$("form > input")

從上面的示例中可以看出ancestor descendant是查詢所有的子子孫孫元素，parent > child只查詢所有的子元素，不查詢孫元素

2、prev + next與prev ~ siblings的區別

HTML 程式碼:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
 

      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 程式碼:$("label + input") 結果:[ <input name="name" />, <input name="newsletter" /> ]
jQuery 程式碼:$("form ~ input") 結果:[ <input name="none" /> ]

$("label + input")：匹配所有緊跟在label後面的input元素
$("form ~ input")：找到所有與label同輩的input元素