類不覆蓋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

回答

相關問題