Question

我如何能够选择与第1层相关的第一个，第二个和第三个 span ，而不是它是否是第2层div的第一个子节点？

<div class="LAYER1">
  <div class="LAYER2">
    <span>FIRST<span>
  </div>
  <div class="LAYER2">
    <span>SECOND</span>
    <span>THIRD</span>
  </div>
</div>

使用 span：first-child 我获得FIRST和SECOND但我只是想获得第一名。

编辑：我的目标是做出一个选择，比如“让我从LAYER1获得第一，第二和第三跨栏儿童”。 SECOND和THIRD也可以在第一个LAYER2 div中，解决方案不应该依赖于它。

EDIT2：http://jsfiddle.net/3hAEc/3/

的示例

Answer 1

仅选择<span>FIRST</span>就像这样（假设浏览器支持它）

.LAYER1 .LAYER2:first-child span { 
    // ...
}

正如您在此处所见：http://jsfiddle.net/3hAEc/

Answer 2

如何向他们添加ID或类，然后以这种方式选择它们？

<div class="LAYER1">
  <div class="LAYER2">
    <span id="first_span">FIRST<span>
  </div>
  <div class="LAYER2">
    <span id="second_span">SECOND</span>
    <span id="third_span">THIRD</span>
  </div>
</div>

Answer 3

试试这个：

.LAYER1 .LAYER2:first-child span:first-child /* first one*/
.LAYER1 .LAYER2+.LAYER2 span:first-child /* second one*/
.LAYER1 .LAYER2+.LAYER2 span:first-child+span /* third one*/

但这仅适用于当前的DOM。

Answer 4

最后，我使用jQuery来使用以下JS解决方案：

// for the first span, use 0 and increase for further children
$(".LAYER1").find("span").eq(0);

多个子容器中的第一个孩子

4 个答案: