css - 伪 CSS，每一秒似乎都失败了

Question

我有这样的html：

<div class="container">
    <div class="foo">Foo!</div> <!-- if this is red... -->
    <div class="bar">Bar!</div>
</div>
<div class="container">
    <div class="foo">Foo!</div> <!-- ...i want this blue... -->
    <div class="bar">Bar!</div>
</div>
<div class="container">
    <div class="foo">Foo!</div> <!-- ...and this red. -->
    <div class="bar">Bar!</div>
</div>

我希望每一秒“foo”都有一个蓝色背景，另一个 foo:s 红色。

我努力了：

.container .foo:nth-child(odd)
{
    background-color: red;
}
.container .foo:nth-child(even)
{
    background-color: blue;
}

我也玩过一些 nht-of-type 但我无法让它工作。在上面的测试中，它们都是“奇数”，因为它们都是蓝色的。

我究竟做错了什么？

Answer 1

您将nth-child选择器放在错误的位置：

.container:nth-child(odd) .foo
{
    background-color: red;
}
.container:nth-child(even) .foo
{
    background-color: blue;
}

jsFiddle 示例

Answer 2

你的选择器有点不对劲。

他们应该在父母身上。

.container:nth-child(odd) .foo
{
    background-color: red;
}
.container:nth-child(even) .foo
{
    background-color: blue;
}