不是由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覆盖的链接

回答

相关问题