Question

在我的CSS中，我有一个标识为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？

Answer 1

我认为问题在于第一条规则#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。

Answer 2

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

您应该使用选择器，如：

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

链接不能被css覆盖

2 个答案: