css - 在 asp :DataPager 中突出显示选定的页码

Question

我正在使用 DataPager 像这样在页面之间导航:

<asp:ListView ID="ListView1" runat="server" EnableViewState="false" OnPreRender="ListView1_PreRender">
        <ItemTemplate>

<a><asp:HyperLink ID="HyperLink1" runat="server" ToolTip='<%# Eval("Title") %>' NavigateUrl='<%# "../books/bookdetails.aspx?Id=" + Eval("Id").ToString() %>' ImageHeight="250" ImageWidth="180"></asp:HyperLink></a>
        </ItemTemplate>
        <LayoutTemplate>
            <li runat="server" id="itemPlaceholder" />
            <div class="page-numbers">
                <asp:DataPager ID="lvDataPager1" runat="server" PageSize="6">
                    <Fields>
                        <asp:NextPreviousPagerField FirstPageText="Back" ShowFirstPageButton="True"
                            ShowNextPageButton="False" ShowPreviousPageButton="False" />
                        <asp:NumericPagerField />

                        <asp:NextPreviousPagerField LastPageText="Forward" ShowLastPageButton="True"
                            ShowNextPageButton="False" ShowPreviousPageButton="False" />
                    </Fields>
                </asp:DataPager>
            </div>
        </LayoutTemplate>
</asp:ListView>

对于悬停效果，我使用了这个 CSS:

div.page-numbers a:hover {
        color: #fff;
        background-color: #1078a5;
        -moz-transition: .2s linear;
        -webkit-transition: .2s ease-out;
        transition: .2s linear;
        border-color: #1078a5;
    }

现在如何更改事件页码的 background-color 因为我无法让它工作。我试过这样的事情:

div.page-numbers a:active {
        color: #fff;
        background-color: #4a7bb8;
    }

但它不起作用。

Answer 1

你误用了 :active 伪选择器。

例如，在超链接中，:active 选择器下的样式仅在用户单击链接时应用。 Check its definition.

如果要设置当前页码的样式，首先应使用 asp:NumericPageField 标记中的属性 CurrentPageLabelCssClass 为其设置一个类:

然后您可以为该类创建一个 CSS 规则:

.current-page {
    color: #fff;
    background-color: #4a7bb8;
}