类不覆盖addClass

我使用jQuery的addClass添加一个类到一个标签，所以当单击它会改变类，所以很明显该标签突出显示。类不覆盖addClass

我的HTML

<div id="mainNav"> 
      <ul> 
       <li id="LinktheBand" onclick="nav('theBand')">The Band</li> 
       <li id="linkTheMusic" onclick="nav('theMusic')">The Music</li>

我的CSS

#mainNav li { 
    float:left; 
    margin-right:5px; 
    color:white; 
    font-family:Tahoma; 
    font-weight:bold; 
    padding: 10px 8px 0px 8px; 
    background:url('../images/transparent-65.png'); 
    height:40px; 
    height: 25px !important; 
    border:1px solid #000; 
} 

#mainNav li:hover { 
    float:left; 
    margin-right:5px; 
    color:white; 
    font-family:Tahoma; 
    font-weight:bold; 
    padding: 10px 8px 0px 8px; 
    background: #660000; 
    height:40px; 
    height: 25px !important; 
    border:1px solid #660000; 
} 

.mainNavSelected { 
    float:left; 
    margin-right:5px; 
    color:white; 
    font-family:Tahoma; 
    font-weight:bold; 
    padding: 10px 8px 0px 8px; 
    background: #660000; 
    height:40px; 
    height: 25px !important; 
    border:1px solid #660000; 
}

我的JavaScript

function nav(a) { 
$('#'+a).show(); 
$('#Link'+a).addClass('mainNavSelected'); 
}

这正常工作，我检查萤火虫，可以看到类= “mainNavSelected” 被添加，但是list元素不会接受新类的任何属性。 Firebug列出了mainNavSelected的所有类项目，但将它们全部划掉。我错过了什么来取代这个元素的类？

来源

2010-06-14 Andelas

您的问题说“覆盖”;你的意思是“压倒一切”吗？ – Pointy 2010-06-14 19:01:29

.mainNavSelected { 
    float:left; 
    margin-right:5px; 
    color:white; 
    font-family:Tahoma; 
    font-weight:bold; 
    padding: 10px 8px 0px 8px; 
    background: #660000 !important; 
    height:40px; 
    height: 25px !important; 
    border:1px solid #660000 !important; 
}

这应该可以解决问题。你看到你的CSS选择器#mainNav li比.mainNavSelected更具体。因此，#mainNav li将始终显示其样式.mainNavSelected.

来源

2010-06-14 19:10:38

谢谢，就是这样。 – Andelas 2010-06-14 19:47:10

Firebug向您显示每个CSS属性的来源。如果它来自多个地方，那些没有生效的地方就被划掉了。

我怀疑“#mainNav li”只比类名更具特异性。尝试将类的选择器更改为“#mainNav li.mainNavSelected”

来源

2010-06-14 18:59:40 Pointy

我相信由ID指定的属性优先于由class指定的属性，所以应该将由ID指定的属性更改为类，然后删除它并添加新的课程。

来源

2010-06-14 19:00:14 joelt

我认为这与CSS级联有关。在id上的样式将覆盖类的样式，即使它们是在后面声明的。尝试将ul li a.mainNavSelected放入CSS中，它应该可以工作。

另请注意，id的情况在两个链接之间不一致。

来源

2010-06-14 19:00:37

类不覆盖addClass

回答

相关问题