CSS拒絕服從

我會讓這短暫的，我得到了這個網頁：CSS拒絕服從

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link rel="Stylesheet" type="text/css" href="css/style.css" /> 
    <link rel="Stylesheet" type="text/css" href="css/nav.css" /> 
</head> 
<body> 
    <div id="header"> 
     <ul id="navList"> 
      <li><a href="#" id="navActive">foo</a></li> 
      <li><a href="#">bar</a></li> 
     </ul> 
    </div> 
</body> 
</html>

有了這個CSS
的style.css

body 
{ 
    padding:0; 
    margin:0; 
    background-color:#000000; 
    background-repeat:no-repeat; 
    background-image:url('../img/bg.jpg'); 
}

nav.css

#navList 
{ 
    padding:0; 
    margin:0; 
    background-image:url('../img/menu.png'); 
    list-style-type:none; 
    padding:12px 150px; 
} 

#navList li 
{ 
    display:inline; 
} 

#navList li a 
{ 
    color:#bfbfbf; 
    padding:14px 25px; 
    text-decoration:none; 
} 

#navList li a:hover 
{ 
    color:#000000; 
    background-color:#bfbfbf; 
    text-decoration:none; 
} 

#navActive 
{ 
    color:#000000; 
    background-color:#bfbfbf; 
}

它看起來像navActive ID的CSS從未被應用...有人可以告訴我爲什麼和/或建議我一種方法來糾正這一點。

謝謝。

來源

2010-03-26 ALOToverflow

看起來O.K.對我來說。你碰巧有一個活生生的例子嗎？用Firebug快速瀏覽通常可以解決這樣的問題。 – 2010-03-26 22:35:29

你可以嘗試用#navList li＃navActive而不是'＃navActive'作爲選擇器嗎？我認爲使用ID *應該總是優先，但我不確定。 – 2010-03-26 22:37:18

這是因爲選擇

#navList li a

是更大的權重比

#navActive

，因爲它是更具體。

您可以通過添加

color:#000000 !important;

或使用

#navList li a#navActive

的選擇戰勝它

來源

2010-03-26 22:38:44 Alex

我認爲ID選擇器具有最高的特異性，這是不正確的？ – bcherry 2010-03-26 22:44:12

亞歷克斯是正確的。分數加在一起，所以帶有2個標籤的id比id本身更具體。 – enduro 2010-03-26 23:05:26

「！important」標籤是否與每個瀏覽器兼容？ – ALOToverflow 2010-03-26 23:06:05

試試這個：

#navActive 
{ 
    color:#000000 !important; 
    background-color:#bfbfbf; 
}

Here's a demo。這是一個特殊的鬥爭，在這種情況下，原來的#navList li a正在贏得勝利。另一種替代方法是使用#navList li a#navActive而不使用!important。

來源

2010-03-26 22:36:41

回答

相關問題