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

Question

<asp:LinkButton>我的网站菜单栏中的 's很少。菜单栏和这些按钮设置了 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. 请提出建议。

score 6 · Accepted Answer

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

如果您考虑一个积分系统，一个元素说ul有 1 分，一个类说navigation有 10 分。因此，在 10 的vsul.navigation li a上至少有 11 分。ul.navigationactiveLink

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

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

继续前进，愿 CSS 与您同在！

1 回答 1