CSS样式被动态地设置被覆盖 [英] CSS style being dynamically set is being overridden

问题描述

我有几个＆LT; ASP：LinkBut​​ton的＆GT; 的在我的网站的菜单栏。菜单栏和这些按钮的CSS集。我所寻找的是突出相应的按钮，这曾经页面被激活。

I have few <asp:LinkButton>'s in my website menu bar. The menu bar and these buttons have Css set. What I am looking for is to highlight the button corresponding to which ever page is active.

我可以动态地应用新的CSS类到我的 Linkbuttons （由浏览器呈现为锚标签的），但新应用的CSS被覆盖由现有的类。我试图分析有没有搞错，但没有运气。这是我的code -

I could apply a new Css class dynamically to my Linkbuttons(rendered as anchor tags by the browser) but the newly applied CSS is overridden by the existing class. I have tried analyzing any mistake there but no luck. This is my code-

HTML的一部分 -

A part of HTML-

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

现有的CSS -

Existing css-

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

CSS类动态设置 -

Css class to be set dynamically-

.activeLink
  {
    color: #588500;
  }

在我的网页加载我这样做 -

In my page loads I am doing this-

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

在HTML浏览器中呈现 -

HTML rendered in browser-

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

它明确表示，类设置，但 activeLink CSS是由 ul.navigation李覆盖的 。建议请。

Its clear that the class is set, but the activeLink css is overridden by the ul.navigation li a. Suggestions please.

推荐答案

这是因为 ul.navigation李一比 .activeLink更具体。

如果你认为一个点系统中的元素说 UL 有1个点，一类说导航有10个因此在 ul.navigation李一对刚 ul.navigation VS的<$ c。至少11分$ C> 10 activeLink 。

If you think about a point system an element say ul has 1 point, a class say navigation has 10. Therefore the ul.navigation li a has at least 11 points on just the ul.navigation vs the activeLink of 10.

一个很好的详细的文章在CSS特异性！

至于你只需要引用您的 .activeLink 以更高的特异性，与无论是 #ID 或 ul.navigation李a.activeLink 。

As for a solution you just need to reference your .activeLink with more specificity, be it with an #id or a ul.navigation li a.activeLink.

前进吧，可能的CSS与你同在！

Go forth and may the css be with you!

这篇关于CSS样式被动态地设置被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！