如何使用css选择器查​​找不在一个div内的所有输入？

Question

Html代码:

<div id="div1">
  <div class="nest">
     <input name="i1"/>
  </div>
  <div>
      <input name="i2"/>
  </div>
  <input name="i3"/>
  <div>
      <input name="i4" />
  </div>
</div>

现在我想找到所有输入内部#div1但不在内部.nest的css选择器,它们是i2,i3,i4.这该怎么做？

Answer 1

给定您的标记,您应该能够使用:not()子选择器:

div:not(.nest) > input

如果您需要限制范围,则#div1可能需要稍微复杂的选择器:

#div1 > input, #div1 > div:not(.nest) > input

如果您有任意和不受控制的嵌套级别,我不确定您是否能够:not()单独使用所有情况.

如果:not()由于浏览器支持问题而根本无法使用,那么使用纯CSS就不行了.