我有一个嵌套列表,选择器非常具体,但是它有什么问题吗?因为我看到所有列表项的背景都是绿色的,不管是奇数还是偶数。
根据要求添加了一些更多的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>
<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>
编辑 - 修复HTML,使用div仅用于嵌套元素,使用span表示文本。
<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>