不是由css覆蓋的鏈接

在我的CSS中，我有一個主容器，ID爲main。在CSS它看起來像這樣：不是由css覆蓋的鏈接

#main a:hover, #main a:active, #main a:focus { 
    background: none repeat scroll 0 0 #095197; 
    color: #FFFFFF; 
}

在特定div我希望鏈接的風格是不同的：

.main_list_div .text_div .mainbt a.bt { 
    width: 100px; 
    height: 26px; 
    background: url(../image/bt.png) no-repeat; 
    display: block; 
    margin-top: 22px; 
    text-decoration: none 
} 
.main_list_div .text_div .mainbt a.bt:hover, 
.main_list_div .text_div div.mainbt link.bt:hover { 
    width: 100px; 
    height: 26px; 
    background: url(../image/bth.png) no-repeat; 
    display: block; 
    margin-top: 22px; 
    text-decoration: none; 
    background-color: transparent 
}

我的HTML是：

<div class="main_list_div">   
    <div class="image_div"><img src="images/directory/1338033387.jpg"></div> 
    <div class="text_div"> 
     <div class="company_name">Yahoo India</div> 
     <div class="category_name">Manufacturers of Primary Category/Secondary Category/Secondary Category</div> 
     <div class="mainbt"><a href="directory-list/yahoo/yahoo-india.html" class="bt"></a></div> 
    </div> 

    <div class="clear"></div> 
</div>

的問題是a (link)被覆蓋，但a:hover不是。我如何覆蓋a:hover？

來源

2012-05-28 Terex Bari

where's .mainbt？嘗試刪除那一個也許有幫助。 – Tim

對不起，我忘了添加類'mainbt'，看我有問題 –

我認爲問題是，第一條規則#main a:hover具有更高的優先級，第二規則.main_list_div .text_div .mainbt a.bt:hover。如果我記得ID正確選擇器的權重爲100，那麼類和屬性選擇器的權重爲10，元素選擇器的權重爲1，優先級最高的規則會勝出 - 如果存在具有相同優先級的規則，那麼規則的位置被定義用於確定結果。在你的例子中，第一個規則的優先級爲111，第二個爲51.

正如其他答案中所提到的，你沒有.mainbt元素。

剛剛發現另一個SO答案explains precedence in more detail。

來源

2012-05-28 07:42:24 detaylor

它意味着覆蓋任何'＃id' id使得ID與ID –

@Toms：是的。最簡單的解決方案是在第二條規則的開頭添加'＃main'。這將消除需要更改任何HTML。 – detaylor

-1

看來在任何地方都沒有mainbt類的元素。所以CSS選擇器不匹配。

你應該使用像選擇：

.main_list_div .text_div a.bt:hover { ... }

來源

2012-05-28 07:35:20

謝謝你沒有理由downvote，希望你喜歡:-)當我寫這個問題時，這個問題看起來不同。 –

不是由css覆蓋的鏈接

回答

相關問題