2

私の CSS には、 id のメイン コンテナがありmainます。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ですか?

4

2 に答える 2

3

#main a:hover問題は、最初のルールが2番目のルールよりも優先されることだと思います.main_list_div .text_div .mainbt a.bt:hover。正しく思い出すと、idセレクターの重みは100、クラスおよび属性セレクターの重みは10、要素セレクターの重みは1です。優先順位が最も高いルールが優先されます。同じ優先順位のルールがある場合は、ルールの位置が優先されます。定義されているは、結果を決定するために使用されます。あなたの例では、最初のルールの優先順位は111、2番目のルールは51になります。

他の回答で述べたように、あなたは.mainbt要素を持っていません。

優先順位をより詳細に説明する別のSO回答を見つけました。

于 2012-05-28T07:42:24.000 に答える
-1

mainbtクラスを持つ要素はどこにもないようです。したがって、css セレクターは一致しません。

おそらく次のようなセレクターを使用する必要があります。

.main_list_div .text_div a.bt:hover { ... }
于 2012-05-28T07:35:20.120 に答える