javascript - 是否有用于第一级嵌套元素的 CSS 选择器而不深入？

Question

<div id="owner">
  <!-- ...other parent elements -->
    <div class="parent one">                <!-- parent lvl 1 -->
      <div class="child one">               <!-- child lvl 1 -->
        <!-- ...other parent elements -->
          <div class="parent two">            <!-- parent lvl 2 -->
            <div class="child two"></div>     <!-- child lvl 2 -->
            <div class="child two"></div>
            <div class="child two"></div>
          </div>
      </div>
      <div class="child one"></div> 
      <div class="child one"></div> 
      <div class="child one"></div> 
    </div>
</div>

var el = document.getElementById("owner");
el && el.querySelectorAll('.parent .child');

重要:类名“one”和“two”仅用于视觉目的 - 它不存在。

结果我们将得到 7 倍的 div.child 节点。如何创建只从“第一个 lvl”中选择子项的选择器(我们最终得到 4 x div.child.one)。

重要:这是一个简单的例子，但实际上我们不知道 div.parent.one 在 div#owner 中有多深，这同样适用于 div.parent.two

也许 ExtJS 可以吗？

var el = Ext.get('#owner');
el.down('.parent .child');     //does not work, returns all elements as above

JSFiddle

Answer 1

你可以使用这个:

#owner > .parent  > .child

使用 > 可以指定父元素的直接子元素。