альтернативная схема раскраски строк с вложенными списками

Question

У меня есть вложенный список, поэтому селектор очень специфичен, есть что-то не так, потому что я вижу зеленый фон со всеми элементами списка, независимо от того, что это нечетно или даже.

добавить немного больше HTML код согласно запросу

.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>

вот мой 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> 

Edit - Фиксирование 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> и она работала: http://jsfiddle.net/kjmycq2y/