c# - 在 C# 中用 javascript 覆盖菜单 css

Question

我正在使用 C# 创建一个网站，供驾车者使用智能手机支付 parking 费。不过，我的菜单有一些问题。我希望菜单为白色，黑色文本，当前页面需要为蓝色，白色文本，但是当我尝试使用 css 这样做时，我得到的结果完全不同:当前页面菜单项仍然是白色，黑色文本在它后面你会看到一点蓝色。有人知道我该如何解决这个问题吗？

我的菜单项位于母版页中:

<div id="menu">
    <ul>
         <li id="accountmenu"><a href="PersoonlijkeGegevens.aspx">Mijn account</a></li>
         <li id="parkeermenu"><a href="Parkeer.aspx">Parkeer</a></li>
         <li id="saldomenu"><a href="SaldoGegevens.aspx">Mijn saldo</a></li>
    </ul>
</div>

我在每个页面中使用 JavaScript 添加当前页面类:

<script type="text/javascript">
    $(document).ready(function () {
        $("#saldomenu").addClass("currentpage");
    });
</script>

最后我在母版页的 css 文件中设置了 css

#menu ul li a:link, a:visited
{    
    background:#fff;
    display:inline-block;
    padding:5px 10px 6px;
    color:#000;
    font-size:16px;
    text-decoration:none;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow:0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.6);
    border-bottom:1px solid rgba(0,0,0,0.25);
    position:relative;
    cursor:pointer;
}

.currentpage
{
    background:#172c7d;
    color:#fff;    
}

我真的不知道我在这里做错了什么，我已经寻找了两个星期的正确答案。请有人帮我解决这个问题。

Answer 1

您需要使当前页面类更加具体。您的当前页面类仅影响 li 元素，而不影响链接。

#menu ul li.currentpage a:link, #menu ul li.currentpage a:visited
{
    background:#172c7d;
    color:#fff;    
}