0 
<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交替着色，而不是整篇文章。这也行不通。

小提琴是http://jsfiddle.net/LKqvz/。请告诉我。

4

3 回答 3

1

它应该是：

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

因为您有多个article带有单个.textDIV 的元素（您的尝试选择了第 n.text个子元素article）

于 2013-08-17T14:59:49.050 回答
0

尝试这个：

    article:nth-child(even) .tweet .text {
           background-color: #FF0000;
      }
于 2013-08-17T15:01:54.517 回答
0

尝试这个

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

Js小提琴

于 2013-08-17T15:00:36.590 回答