如何使用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内{c}选择器内的所有输入，这些输入为i2,i3,i4。怎么做？

Answer 1

鉴于您的标记，您应该能够将:not()与子选择器一起使用：

div:not(.nest) > input

如果您需要将范围限制为#div1，则可能需要稍微复杂的选择器：

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

如果您有任意且不受控制的嵌套级别，我不确定您是否能够仅使用:not()覆盖所有案例。

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

Answer 2

最简单的方法是使用子选择器：

#div1 > input

Answer 3

#div1 div:nth-child(2) > input, #div1 div:last > input