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 Foundation 5。 侧边栏的第一个子项有效，但 #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正常工作，ID 为 rightside 的div必须是父级的第一个子级，就像 ID sidebar 的div一样。

鉴于您使用的是 ID，具有 ID rightside 的div应该是 HTML 中唯一的一个，因此您使用的选择器将只是#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/