asp.net - 动态设置的 CSS 样式被覆盖

Question

我很少<asp:LinkButton>在我的网站菜单栏中。菜单栏和这些按钮设置了 Css。我正在寻找的是突出显示与事件页面相对应的按钮。

我可以将新的 Css 类动态应用到我的 Linkbuttons (由浏览器呈现为 anchor 标记)但新应用的 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>

很明显类已设置，但是 activeLink css 被 ul.navigation li a 覆盖.请提出建议。

Answer 1

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

如果你考虑一个点系统，一个元素 ul 有 1 个点，一个类 navigation 有 10 个点。因此 ul.navigation li a 在 ul.navigation 上至少有 11 分，而 activeLink 有 10 分。

很好detailed article on css specificity !

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

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

出发吧，愿 css 与你同在!