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

【问题标题】：How to find all inputs which is not inside one div with css selector?如何使用css选择器查找不在一个div内的所有输入？
【发布时间】：2012-05-15 13:45:52
【问题描述】：

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>

现在我想使用 css 选择器找到所有在 #div1 内但不在 .nest 内的输入，它们是 i2,i3,i4。如何做到这一点？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

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

div:not(.nest) > input

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

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

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

如果您因为浏览器支持问题而根本无法使用:not()，那么您在使用纯 CSS 时就不走运了。

【讨论】：

【解决方案2】：

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

#div1 > input

【讨论】：

这适用于这个问题中的示例，但不是我正在寻找的。所以我让它有点复杂:)
这是子选择器，不是后代选择器。
我想这就是为什么我必须在那之后写“寻找直系子女”。听起来有些不对劲。谢谢@BoltClock，它已修复。但不幸的是，这不是他想要的。

【解决方案3】：

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

【讨论】：

@Hassaan：欢迎来到 StackOverflow！添加一个简短的解释并 - 正如 BoltClock 所提到的 - 使用有效的 CSS，将提高您的答案的质量。还可以考虑以jsfiddle.net 为例创建。