您可以使用以下命令：

#owner > .parent  > .child

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

@kkris1983此CSS选择器将仅适用于未嵌套在其他.child中的.child

.child:not(.child .child)

对于.parent更复杂的情况：

.parent>.child:not(.parent>.child .parent>.child)

这样，您就可以只为第一次出现的子代创建选择器。适用于任何级别的嵌套和中间标记。https://codepen.io/doc_ss/pen/xxyYMaP

var children = document.querySelectorAll('.child:not(.child .child)');
document.getElementById('count').innerHTML = "The number of descendants of only the first level found: "+children.length;

#owner .parent > .child {
  background: blue;
}
#owner .child:not(.child .child) {
  background: red;
}

<div id="owner">
  <!-- ...other parent elements -->
    <div class="parent one">                <!-- parent lvl 1 -->
      <div class="child one">1               <!-- child lvl 1 -->
        <!-- ...some other  elements -->
          <div class="parent two">            <!-- parent lvl 2 -->
            <div class="child two">1.1</div>     <!-- child lvl 2 -->
            <div class="child two">1.2</div>
            <div class="child two">1.3</div>
          </div>
      </div>
      <div class="child one">2</div> 
      <div class="child one">3</div> 
      <div class="child one">4</div> 
    </div>
  <div id="count"></div>
</div>

试试这个。你使用了outerdiv名称也父改变外部div名称

var el = document.getElementById("owner");

parent = document.querySelector('.parents');
children = parent.children;
console.info(children);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="owner">
  <div class="parents one">                <!-- parent lvl 1 -->
    <div class="child one">               <!-- child lvl 1 -->
      <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>