Question

我有以下代码，

<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获得申请？

Answer 1

您需要使第二个规则更具体（更多信息请查看，例如，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。}

Answer 2

让您的选择器更加具体：

#nav .tab8Class

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

background-color: white;
              ^

Answer 3

使用

#nav .tab8Class {

而不是：

.tab8Class {

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

您可以阅读CSS特异性here。

Answer 4

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

#nav a.tab8Class{

    background: #000 ; // change the color 

}

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

Answer 5

您有两个选择：

1）删除该类并使用：

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

2）这是更向后兼容的：

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

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

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

Answer 6

更改您的代码，如下所示

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

Answer 7

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

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

覆盖＆＃34; a＆＃34;所应用的CSS。标签

7 个答案: