覆盖" a"所应用的CSS。标签

时间:2013-03-08 10:59:19

标签: css

我有以下代码,

<div id="nav">
   <a href="#" >Tab1</a>
   <a href="#" >Tab2</a>
   <a href="#" >Tab3</a>
   <a href="#" >Tab4</a>
   <a href="#" >Tab5</a>
   <a href="#" >Tab6</a>
   <a href="#" >Tab7</a>
   <a href="#" class="tab8Class">Tab8</a>
   <a href="#" >Tab9</a>
</div>

#nav a {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-colour: white;
}

.tab8Class {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-color: lightgray;
}

我想为Tab8应用不同的background-colour。因此,仅对于Tab8,我在a href标记中添加了一个额外的类。

但是,即使对于Tab8,#nav a也会覆盖tab8Class的所有属性。

如何让tab8Class获得申请?

7 个答案:

答案 0 :(得分:5)

您需要使第二个规则更具体(更多信息请查看,例如,MDN on Specificity),因此它不会被第一个规则覆盖。此外,您不必重复所有未更改的属性:

#nav a {
   float: left;
   color: #004761;
   font-size: 12px;
   font-weight: bold;
   text-decoration: none;
   padding: 9px 5px 9px 13px;
   background-color: white;
}

#nav .tab8Class {
   background-color: lightgray;
}

<强> Example Fiddle

第一条规则中也有一个拼写错误:它说background-colour而不是background-color

答案 1 :(得分:3)

让您的选择器更加具体:

#nav .tab8Class

您还会移除u中的colour以获得正确的css:

background-color: white;
              ^

答案 2 :(得分:2)

使用

#nav .tab8Class {

而不是:

.tab8Class {

这会使您的选择器更加特定

您可以阅读CSS特异性here

答案 3 :(得分:1)

只需更改bg颜色规则,无需再次编写所有规则。

#nav a.tab8Class{

    background: #000 ; // change the color 

}

specificity你需要阅读有关此事的内容。

答案 4 :(得分:1)

您有两个选择:

1)删除该类并使用:

#nav a:nth-child(8){
    background-color: lightgray;
}

2)这是更向后兼容的:

#nav .tab8Class{
    background-color: lightgray;
}

如果您想添加特殊的悬停效果(如评论中所述)

#nav .tab8Class:hover{
     //Do something
}

答案 5 :(得分:1)

更改您的代码,如下所示

#nav a.tab8Class {
    float: left;
    color: #004761;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    padding: 9px 5px 9px 13px;
    background-color: lightgray;
}

答案 6 :(得分:-2)

您只需使用jquery即可。请添加jquery库。

$(document).ready(function(){
    $('#nav a:eq(7)').addClass('tab8Class');
});