CSS的第一个孩子第二次不工作

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 Foundation5。侧边栏的第一个孩子可以工作，但#rightside元素的孩子不能。 知道为什么吗？

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

我在CSS代码中没有别的了，仅此而已。

Answer 1

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

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

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

由于有注释 ：仅当您的第一个孩子实际上是一个div时，这才起作用；如果您要为第一个孩子设置样式，而无论其类型如何，都可以使用：

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

Answer 2

对于#rightside:first-child工作， div ID为rightside将需要父母的第一个孩子，因为div ID为sidebar是。

假设您使用的是ID，则ID rightside为div应该是HTML中唯一的div ，因此您要使用的选择器将只是#rightside 。

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/