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;
}

＆＃13;

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

＆＃13;

这是我的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。

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

具有嵌套列表的备用行着色方案

1 个答案: