jQuery中冒号与大于号在选择器中的区别是什么？

嘿，这两个选择器虽然现在返回了相同的结果，但它们的匹配逻辑其实有不小的差异，咱们拆开来说：

1. $('.deposit_amount :input') #

• 这里的空格是后代选择器，它会匹配.deposit_amount元素下所有层级的后代元素，不管嵌套多深都能找到
• :input是jQuery专属的特殊选择器，它的匹配范围不只是<input>标签，还包括所有表单控件：比如<textarea>、<select>、<button>这些都算在内
• 举个例子，如果你的HTML结构变成这样：

  <div class="deposit_amount">
    <label>Deposit Amount: <input type="text" value="5"> </label>
    <select><option>1</option></select>
  </div>
  

  这个选择器会同时选中里面的<input>和<select>

2. $('.deposit_amount>input') #

• 这里的**>是直接子元素选择器**，它只会匹配.deposit_amount的直接子节点，也就是紧挨着它的下一级元素，不会深入到更深的嵌套层级
• 它只针对<input>标签，其他表单控件比如<select>、<button>哪怕是.deposit_amount的直接子元素，也不会被选中
• 还是用上面的HTML例子，这个选择器就找不到<input>了（因为它是<label>的子元素，不是.deposit_amount的直接子元素），只会匹配.deposit_amount下直接的<input>标签

为什么你现在看到的结果一样？ #

因为你的当前HTML结构里，.deposit_amount下的<input>要么是直接子元素，而且范围内没有其他表单控件，所以两个选择器恰好命中了同一个元素。但一旦结构变化（比如嵌套加深、新增其他表单控件），它们的返回结果就会不一样啦。

内容的提问来源于stack exchange，提问作者Jwan622