css - 以不同颜色显示 div 的第一个元素

Question

我是这样做的:

<div class="eight columns">
    <div class="content">
        <%= post.text %>
    </div>
</div>

这会在单独的 div block 中显示我的帖子我希望第一个帖子具有不同的颜色。

我尝试了 .content:first-child { background-color: red;} 但它似乎不起作用。

更新

实际的 HTML 输出:-

 <div class="eight columns">
        <div class = "speech">
          <p>Has anyone got a clue about this?</p>
        </div>
 </div>

有什么想法可以实现预期的结果吗？

Answer 1

I tried .content:first-child { background-color: red;} but it doesn't seem to work.

---

你错过了中间的空间，它针对子元素:

.content .speech:first-child { background-color: red;} 

这将选择作为 .content 子元素的第一个 .speech 元素。需要空格来选择 .content 元素的 子元素，而不是 .content 元素本身。

演示:http://jsfiddle.net/RbBcD/2/

最初，我错误地说要使用 .content :first-child，这太宽泛了，因为它会选择整个 中的 every 个第一个 child 。内容 元素。然而，.content > :first-child 也可以工作，但我不一定在这里推荐它。

关于 :first-child 的更多信息:http://reference.sitepoint.com/css/pseudoclass-firstchild