jquery - jQuery 的空格和 > 选择器有什么区别？

Question

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

Answer 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”添加到每个列表元素。

我不确定你用 < 和 ? 指的是什么？运营商。

Answer 2

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

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

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

Answer 3

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

#foo > * > * > .bar

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

Answer 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>