중첩 목록을 사용하여 대체 행 채색 체계

Question

중첩 목록이 있으므로 선택기가 매우 구체적입니다. 이상한 점이 있습니다. 홀수인지 또는 무작위 이건 관계없이 모든 목록 항목이 녹색으로 표시됩니다.

요청 여기

.detail ul.table-view li.table-view-cell ul.cell li:nth-child(even) .session { 
    background-color: yellow; 
} 
.detail ul.table-view li.table-view-cell ul.cell li:nth-child(odd) .session { 
    background-color: green; 
} 

<ul class="table-view"> <!-- ng-repeat="speaker in speakers | filter:{keynote:isKeynote} --> 
 
    <li class="table-view-cell" ng-repeat="session in sessions"> 
 
     <ul class="cell"> 
 
      <li class="cell-content"> 
 
       <span class="time" style="background-color:#{{session.color}}"> 
 
        abc 
 
       </span> 
 
       <span class="session"> 
 
        <div>name </div> 
 
        <div>Room 1</div> 
 
       </span> 
 
      </li> 
 
      <li class="cell-content"> 
 
       <span class="time" style="background-color:#{{session.color}}"> 
 
        abc 
 
       </span> 
 
       <span class="session"> 
 
        <div>name </div> 
 
        <div>Room 1</div> 
 
       </span> 
 
      </li> 
 
      <li class="cell-content"> 
 
       <span class="time" style="background-color:#{{session.color}}"> 
 
        abc 
 
       </span> 
 
       <span class="session"> 
 
        <div>name </div> 
 
        <div>Room 1</div> 
 
       </span> 
 
      </li> 
 
      <li class="cell-content"> 
 
       <span class="time" style="background-color:#{{session.color}}"> 
 
        abc 
 
       </span> 
 
       <span class="session"> 
 
        <div>name </div> 
 
        <div>Room 1</div> 
 
       </span> 
 
      </li> 
 
      <li class="cell-content"> 
 
       <span class="time" style="background-color:#{{session.color}}"> 
 
        abc 
 
       </span> 
 
       <span class="session"> 
 
        <div>name </div> 
 
        <div>Room 1</div> 
 
       </span> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

에 따라 좀 더 HTML 코드를 추가하면 내 DOM

<ul class="table-view"> <!-- ng-repeat="speaker in speakers | filter:{keynote:isKeynote} --> 
    <li class="table-view-cell" ng-repeat="session in sessions"> 
     <ul class="cell"> 
      <li class="cell-content"> 
       <span class="time" style="background-color:#{{session.color}}"> 
        <div class="start">{{session.start | date:"h:mma"}}</div> 
        <div class="to">to</div> 
        <div class="end">{{session.end | date:"h:mma"}}</div> 
       </span> 
       <span class="session"> 
        <div>{{session.name}}</div> 
        <div>Room: {{session.room}}</div> 
       </span> 
      </li> 
     </ul> 
    </li> 
</ul> 

편집이다 - 단지 중첩 들어있는 div HTML을 고정 텍스트의 요소와 범위 .

<ul class="table-view"> <!-- ng-repeat="speaker in speakers | filter:{keynote:isKeynote} --> 
     <li class="table-view-cell" ng-repeat="session in sessions"> 
      <ul class="cell"> 
       <li class="cell-content"> 
        <div class="time" style="background-color:#{{session.color}}"> 
         <span>{{session.start | date:"h:mma"}}</span> 
         <span>to</span> 
         <span>{{session.end | date:"h:mma"}}</span> 
        </div> 
        <div class="session" > 
         <span class="name">{{session.name}}</span> 
         <span class="room">Room: {{session.room}}</span> 
        </div> 
       </li> 
      </ul> 
     </li> 
    </ul> 

Answer 1

사용자들이 텍스트 만 캡슐화하는 데 사용되어야로 잘못 <span>를 사용. 요소를 중첩 할 때는 <div>을 사용하십시오.

나는 <div>와 코드를 테스트하고 일했다 : 렌더링 된 HTML을 볼 수 http://jsfiddle.net/kjmycq2y/