Question

我有这个HTML：

  <div class="row">
         <div id="sidebar" class="column large-2 medium-3">
             <div class="row">
               test
             </div>
         </div>
         <div id="rightside" class="column large-10 medium-9">
             <div class="row">test2</div>
         </div>
    </div>

这个CSS：

#rightside:first-child{
 border-bottom:solid 1px @main_color;
text-align:center;

}
#sidebar:first-child{
   border-bottom:solid 1px @main_color;
    text-align:center;
}

我正在使用Zurb Foundation 5.侧边栏的第一个孩子工作，但#rightside元素的工作没有。知道为什么吗？

我已经检查了#rightside元素，但我无法看到我在Chrome中的检查器中应用的CSS选择器。似乎由于某种原因它没有认识到选择器。

CSS代码中没有其他内容，只有这一点。

Answer 1

#rightside div:first-child 
{
  /* styles */
}

#sidebar div:first-child 
{
  /* styles */
}

这样您就可以将样式应用于#rightside和#sidebar内的第一个DIV。

由于评论：这只有在您的第一个孩子实际上是div时才有效，如果您想为第一个孩子设置样式而不管它可以使用哪种类型：< / p>

#sidebar :first-child
{  
  /* styles */
}

Answer 2

要使#rightside:first-child生效，标识为div的{{1}}必须是父母的第一个孩子，因为标识为rightside的{{1}}是

鉴于您使用的是ID，ID为div的{{1}}应该是HTML中唯一的ID，因此您使用的选择器只是sidebar。

Answer 3

您需要https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

这是针对特定元素的第一种类型，在您的情况下，它是div

#rightside div:first-of-type {
    background-color: red;
}

http://jsfiddle.net/w0wprkb0/

CSS first-child第二次没有工作

3 个答案: