css - 通过 css 对重复 html 结构的 div 进行交替着色

Question

<article class="tweet-inner"> 
  <div class="text-wrapper">
    <div class="tweet">
        <div class="text">
            <p>Coming down! Time for Croation BBQ </p>
        </div>

        <p class="last"> 
            <span class="pull-right">
                <small> Hello this is first text </small>
                <small> Hello this is second text </small>
            </span>
        </p>
    </div>
  </div>
</article>

我有以下重复的 html 结构。

截至目前，我想提供具有不同背景的交替行。我要着色的元素是 class=text

我在我的 CSS 中执行以下操作 -

.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
    background-color: #FF0000;
}

这个不行，我也试过了-

.text:nth-child(even) {
    background-color: #FF0000;
}

这是有效的 -

article.text:nth-child(even) {
        background-color: #FF0000;
    }

但我希望 .text 交替着色，而不是整篇文章。这也行不通。

fiddle 是http://jsfiddle.net/LKqvz/ .请告诉我。

Answer 1

应该是:

article:nth-child(even) .text{
  ...
}

因为您有多个 article 元素和一个 .text DIV(您尝试从 article 选择第 n 个 .text 子元素)