正在覆盖动态设置的CSS样式

Question

我有几个<asp:LinkButton>的在我的网站的菜单栏.菜单栏和这些按钮具有Css设置.我正在寻找的是突出显示与哪个页面处于活动状态相对应的按钮.

我可以动态地将一个新的Css类应用于我Linkbuttons(由浏览器呈现为锚标记),但新应用的CSS被现有类覆盖.我试过分析那里的任何错误,但没有运气.这是我的代码 -

HTML的一部分 -

<ul class="navigation">
   <li>
       <asp:LinkButton ID="lbtn_about" runat="server" OnClick="lbtn_about_Click">About Us</asp:LinkButton>
   </li>

现有的css-

 ul.navigation li a
  {
    text-decoration: none;
    display: block;
    color: #838383;
    height: 24px;
  }

要动态设置的Css类 -

.activeLink
  {
    color: #588500;
  }

在我的页面加载中我这样做 -

LinkButton lb = (LinkButton)Page.Master.Master.FindControl("lbtn_about");
lb.CssClass = "activeLink";

在浏览器中呈现的HTML-

<a id="ctl00_ctl00_lbtn_about" class="activeLink" href="javascript:__doPostBack('ctl00$ctl00$lbtn_about','')">About Us</a>

很明显,这个类已经设置好了,但activeLinkcss被它覆盖了ul.navigation li a.建议请.

Answer 1

这是因为ul.navigation li a更具体.activeLink.

如果你考虑一个点系统,一个元素说ul有1分,一个类说navigation有10分.因此,ul.navigation li a只有10分ul.navigation与activeLink10 分相比至少有11分.

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html">

至于解决方案,你只需要.activeLink更具体地引用你的,无论是a #id还是a ul.navigation li a.activeLink.

走了,可能css和你在一起!