当它在div中时，如何选择第一个子节点

Question

这是我的代码，我将选择第一个<span>

的孩子

<div class="textTextmenu">
      <img src="pic/postimage.png"/>
        <span>
            I need to select this span
        </span>
        <span>
            span 2
       </span>
   </div>

我想用第一个孩子执行此操作，但我不知道如何使用first-child

像这样：

.textTextmenu span:first-child{
 /*
    writing code here
 */
  color:red;
}

Answer 1

在您的示例中，.textTextmenu span:first-child将无法匹配任何内容。 .textTextmenu的{​​{3}}是img。

您可能实际上想要查看first-child或first-of-type，例如

.textTextmenu span:first-of-type {}

或

.textTextmenu :nth-child(2) {}

在这个特定示例中可以使用的其他方法是nth-child或+，如下所示：

.textTextmenu span {
    /* Style the first span */
}
.textTextmenu span + span {
    /* Style the next span */
}

或

.textTextmenu span {
    /* Style the first span */
}
.textTextmenu span:last-child {
    /* Style the next span */
}

Answer 2

这一切都是为了让你明白

1)    .textTextmenu span:first-of-type { color:red } 
2)    .textTextmenu :nth-child(1){border:1px solid red;}
3)    .textTextmenu span:nth-child(2){color:red;}

DEMO 1

DEMO 2

DEMO 3

Answer 3

我对你想要的东西感到困惑但是......

.textTextmenu img:first-child{
  border:2px solid red;
 /*How to select First child? / this way is wronge and image is not selected*/
}

正确？

Answer 4

.textTextmenu img:first-child{
  border:2px solid red;
}

这将在div

中选择第一个img标签

Answer 5

这是好事吗？它在textTextmenu

中选择图像后的每个跨度

.textTextmenu    img + span {} 

Answer 6

您无法使用first-of-type的任何理由？

.textTextmenu span:first-of-type {
  ...styles go here... 

}

注意：与许多CSS伪选择器一样，first-of-type只是nth-of-type(1)的别名，因为first-child是nth-child(1)的别名

Answer 7

选择图像，而不是：

.textTextmenu span:first-child{}

做

.textTextmenu img:first-child{}

以下是其中的一个小提琴：http://jsfiddle.net/763K9/

Answer 8

.textTextmenu img + span{
  border:2px solid red;
 /*How to select First child? / this way is wronge and image is not selected*/
}

请参阅演示http://jsfiddle.net/nUwDb/