CSS动态设置的样式被覆盖

Question

我网站的菜单栏里有几个<asp:LinkButton>。菜单栏和这些按钮都设置了CSS。我想要的是，突出显示与当前活动页面相对应的按钮。

我可以动态地为我的Linkbuttons（由浏览器呈现为锚标签）应用一个新的CSS类，但新应用的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>

很明显这个class已经被设置，但是activeLink的css样式被ul.navigation li a覆盖了。请给出建议。

- Shiridish

Answer 1

这是因为ul.navigation li a比.activeLink更具体。如果你想象一个点系统，如一个元素ul有1分，一个类navigation有10分。因此，ul.navigation li a至少在ul.navigation上就已经有了11分，而activeLink只有10分。这里有一篇关于CSS特异性的详细文章！解决方案是通过更多的特殊性引用你的.activeLink，例如使用#id或ul.navigation li a.activeLink。祝你好运并希望CSS之神与你同在！

- Sphvn

---

很有趣。我不知道CSS的特异性。谢谢你提供链接。让我看看它和你的解决方案 :) - Shiridish