是否有第一级嵌套元素的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. owner中div.parent.one有多深,同样适用于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

随着>您可以指定从父元素的直接孩子.