jQuery 的空格和 > 选择器有什么区别？答案

【问题标题】：What is the difference between jQuery's space and > selectors?jQuery 的空格和 > 选择器有什么区别？
【发布时间】：2010-11-16 03:02:35
【问题描述】：

space 和 > 选择器有什么区别？并且可能相关，我怎样才能找到其他东西的直接孩子，而不是降低后代线？

【问题讨论】：

标签： jquery css jquery-selectors css-selectors

【解决方案1】：

为：

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

例如

$("ul > li").addClass("blah");

将“blah”类添加到 1 2 和 3 而：

$("ul li").addClass("blah");

将类“blah”添加到每个列表元素。

我不确定你用

【讨论】：

ul > li 是否将它们全部设置为“blah”？因为你有一个子列表，它在 ul 中也有 li 孩子。
> 表示直系子女，而不是孙辈或更多。
ul > li 也匹配嵌套列表
您应该更新您的示例以将内部 ul 设置为 ol，因为您当前的代码不会像您描述的那样运行（尽管在技术上是正确的）。

【解决方案2】：

在 CSS 中，> 表示“直接子级”：仅选择直接子级的节点。

虽然空格表示“任何后代”：可以选择直接子代和这些子代的子代。

我敢打赌 jQuery 使用相同的约定。

【讨论】：

【解决方案3】：

如前所述，空格将选择任何后代，而> 将仅选择直接子代。如果你只想选择孙子或曾孙，那么你可以使用这个：

#foo > * > * > .bar

（所有具有“bar”类的元素，它们是 id 为“foo”的元素的曾孙）

【讨论】：

【解决方案4】：

看看这个..

$(".testit > a") //match the first <a> tag below
$(".testit a") // matches all <a> tag below

<p class="testit">
  <a href="#">All the rules will match this</a>
  <span>
    <a href="#">second rule can only select this</a>
  </span>
</p>

【讨论】：