html - 如何使用 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>

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

Answer 1

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

div:not(.nest) > input

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

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

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

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