asp.net-mvc - CSS 选择器 : last-child not working when added with a FOR loop

Question

我正在使用 Razor 页面处理 ASP.NET MVC。当我使用 ForEach 循环添加元素时，最后一个子选择器工作正常。当我使用 For 循环时，last-child 不起作用。

这个有效:

    @foreach (var m in Model.Playlists)
    {
        <tr>
            <td><a href="/PlayLists/ShowTracks?playlistId=@m.id&trackCount=@m.TrackCount&playlistName=@m.Name">@m.Name</a></td>
            <td>@m.TrackCount</td>
        </tr>
    }

这不起作用:

    @for (int i = 0; i < Model.TrackList.Count; i++)
    {
        <tr>
           <td>@Html.CheckBoxFor(x => x.TrackList[i].IsSelected)</td>
            <td>@Model.TrackList[i].Name)</td>
            <td>@Model.TrackList[i].Artist</td>
            <td>@Model.TrackList[i].Album</td>
         </tr>

            @Html.HiddenFor(x => x.TrackList[i].Artist)
            @Html.HiddenFor(x => x.TrackList[i].id)
            @Html.HiddenFor(x => x.TrackList[i].Album)
            @Html.HiddenFor(x => x.TrackList[i].Name)
        }

作为解决方法，我可以添加以下内容:

    @if (i == (Model.TrackList.Count - 1))
    {
        <td class="lastright">@Model.TrackList[i].Album</td>
    }
    else
    {
        <td>@Model.TrackList[i].Album</td>
    }

然后将我的样式添加到类中。只是好奇为什么它不能按预期工作。 DOM 资源管理器不显示任何其他元素。

还有CSS:

    .tracksTable tbody tr:last-child td:first-child {
        border-radius: 0 0 0 16px;
    }

    .tracksTable tbody tr:last-child td:last-child {
        border-radius: 0 0 16px 0;
    }

Answer 1

拉动 @Html.HiddenFor()在里面 <td> block 解决了这个问题。我注意到最后的 </td> 之间是否有任何内容最后一个 </tr>它将无法找到最后一个 <td>作为 last-child .

@for (int i = 0; i < Model.TrackList.Count; i++)
{
    <tr>
        <td>@Html.CheckBoxFor(x => x.TrackList[i].IsSelected)</td>
        <td>
            @Model.TrackList[i].Name)
            @Html.HiddenFor(x => x.TrackList[i].Name)
        </td>
        <td>
            @Model.TrackList[i].Artist
            @Html.HiddenFor(x => x.TrackList[i].Artist)
        </td>
        <td>
            @Model.TrackList[i].Album
            @Html.HiddenFor(x => x.TrackList[i].id)
            @Html.HiddenFor(x => x.TrackList[i].Album)
        </td>
    </tr>
}