asp.net - CSS，ASP :listview and nth-child

Question

我正在尝试学习 CSS3 并避免使用表格标签。在 asp.net 元素中使用 Visual Studio 2010、.net 4.0 和 vb.nt。我有一个 ListView ，我试图让行变为交替颜色。我有什么作品，但只是部分作品。呈现在屏幕上的是几行具有环绕文本的行。阴影只会影响屏幕上的一条小线。它不会覆盖整行。这是代码:

div.row
{
    clear: both;
    padding-top: 5px;
}

div.row:nth-child(1n+3)
{
    background-color: #C0C0C0;
}


div.row span.label
{
    float: left; /*width: 100px;*/
    text-align: right;
    padding-right: 5px;
    font-weight: bold;
}

div.row span.cell
{
    float: left; /*width: 335px;*/
    text-align: left;
}

这是标记:

<ItemTemplate>
            <div class="row" >
                <span class="cell" style="width: 200px;">
                    <asp:HyperLink ID="lblCalendarDataID" runat="server" NavigateUrl='<%# "CalendarAddEdit.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
                        Text='<%# databinder.eval(container.dataitem,"Title")%>' />
                </span>
                <span class="cell" style="width: 150px;">
                    <asp:Label ID="lblStartDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartDate1","{0:d}")%>' />
                    -
                    <asp:Label ID="lblEndDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndDate1","{0:d}")%>' />
                </span>
                <span class="cell" style="width: 150px;">
                    <asp:Label ID="lblStartTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartTime1", "{0:t}")%>' />
                    -
                    <asp:Label ID="lblEndTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndTime1", "{0:t}")%>' />
                </span>
                <span class="cell" style="width: 350px;">
                    <asp:Label ID="lblDescription" runat="server" Text='<%# databinder.eval(container.dataitem,"Description")%>' />
                </span>
                <span class="cell" style="width: 50px;">
                    <asp:HyperLink ID="hlDeleteID" runat="server" NavigateUrl='<%# "CalendarDelete.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
                        Text="Delete" />
                </span>
            </div>
        </ItemTemplate>

谁知道我做错了什么。我尝试使用 alternatingItemTemplate 但无法将其遮蔽。在那个 senerio.. 我做了一个

<div class="row" style="background-color: #C0C0C0;">

任何帮助都会很棒。

Answer 1

要让你的背景阴影做你想做的，尝试修改这个样式:

div.row:nth-child(1n+3)
{
    background-color: #C0C0C0;
}

是这样的:

div.row:nth-child(1n+3) span
{
    background-color: #C0C0C0;
}

将背景颜色实际应用到包含内容的 span。