交替行颜色方案与嵌套列表

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>

编辑 - 修复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>

- user2727195

---

需要查看渲染后的HTML。例如？ - Papa

为什么不在渲染时使用类似于ng-class-odd或ng-class-even这样的东西添加一个类呢：https://docs.angularjs.org/api/ng/directive/ngClassOdd - haxxxton

哇，这就是我们所说的横向思维...太棒了，谢谢。 - user2727195

Answer 1

您正在错误地使用<span>，因为它们只应用于封装文本。在嵌套元素时，请使用<div>。

我使用<div>测试了代码，并且它可以正常工作：http://jsfiddle.net/kjmycq2y/

- Papa

---

感谢您的启示，请查看我的编辑以检查我是否正确地编写了HTML。您在Fiddle上的代码可以运行，但我仍然遇到问题。我正在比较两者以找出差异，请帮我看一下。 - user2727195

@Papa，如果每个子列表中的行数不是偶数，则您的小提琴无法正常工作。请参阅此演示它的小提琴：http://jsfiddle.net/ean98x0b/ - Thomas Tempelmann