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 구조가 반복됩니다.

현재로서는 다른 배경을 가진 대체 행을 제공하고 싶습니다.

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

이 작동하는 것입니다 - -이 작동하지 않습니다

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

, 나는 또한 시도 - 나는 색상을 원하는 요소 내가 내 CSS에서 다음을 수행 class=text

입니다

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

하지만 .text은 e가 아니라 번갈아 가며 색칠하고 싶습니다. 기사. 이 또한 작동하지 않습니다.

바이올린은 http://jsfiddle.net/LKqvz/입니다. 저에게 알려주세요.

Answer 1

(당신의 시도가 n 번째 article에서 .text 아이를 선택) Js Fiddle

Answer 2

이 있어야한다 :

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

단일 .text DIV 여러 article 요소를 가지고 있기 때문에이

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

을 시도

Answer 3

시도 :

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