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

问题描述

我的网站菜单栏中有几个< asp：LinkBut​​ton> 。菜单栏和这些按钮具有Css设置。我要找的是突出显示对应于哪个页面是活动的按钮。

我可以将一个新的Css类动态地应用到我的 Linkbuttons （ ），但是新应用的CSS被现有类覆盖。我试过分析任何错误，但没有运气。这是我的代码 -

HTML的一部分 -

 < ; ul class =navigation> 
< li> 
< asp：LinkBut​​ton ID =lbtn_aboutrunat =serverOnClick =lbtn_about_Click>关于我们< / asp：LinkBut​​ton> 
< / li> 
  

现有的css -

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

动态设置Css类 -

  .activeLink 
 {
 color：＃588500; 
} 
  

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

  LinkBut​​ton lb =（LinkBut​​ton）Page.Master.Master.FindControl（lbtn_about）; 
 lb.CssClass =activeLink; 
  

在浏览器中呈现的HTML -

 < a id =ctl00_ctl00_lbtn_aboutclass =activeLinkhref =javascript：__ doPostBack（'ctl00 $ ctl00 $ lbtn_about'，''）>关于我们< / a& 
  

清楚的是设置了类，但 activeLink css被 ul.navigation li a 覆盖。建议。

解决方案

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

如果你想一个点系统一个元素说 ul 有1分，一个类说导航有10.因此 ul.navigation li a 在 ul.navigation 与 activeLink 之间只有至少11个点。

一个好的关于css特异性的详细文章！

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

对于一个解决方案，你只需要更具体地引用 .activeLink ，无论是 #id a ul.navigation li a.activeLink 。

>

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.

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-

A part of HTML-

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

Existing css-

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

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 rendered in browser-

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

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

解决方案

This is because ul.navigation li a is more specific than .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.

A good detailed article on css specificity!

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

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.

Go forth and may the css be with you!

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