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

I think that the issue is that the first rule #main a:hover has higher precedence that the second rule .main_list_div .text_div .mainbt a.bt:hover. If I recall correctly id selectors have a weight of 100, class and attribute selectors a weight of 10 and element selectors a weight of 1, the rule with the highest precedence wins - if there are rules with the same precedence then the position that the rules are defined is used to determine the outcome. In your example the first rule would have a precedence of 111, the second 51.

As mentioned in other answers you don't have a .mainbt element.

Just found another SO answer that explains precedence in more detail.

于 2012-05-28T07:42:24.000 回答
-1

似乎mainbt任何地方都没有带类的元素。所以css选择器将不匹配。

您可能应该使用如下选择器：

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