1

私は以下のコードを持っています、

<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;
}

background-colourTab8に別のものを適用したい。そのため、Tab8 だけのために、a hrefタグに追加のクラスを追加しました。

ただし、Tab8 の場合でも、#nav aのすべての属性をオーバーライドしていますtab8Class。

応募するにはどうすればよいtab8Classですか？

4

7 に答える 7

5

2番目のルールをより具体的にする必要があります（詳細については、たとえば、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;
}

フィドルの例

最初のルールにもタイプミスがありました：background-colourの代わりに言ったbackground-color。

于 2013-03-08T11:02:00.980 に答える
3

セレクターをさらに具体的にします。

#nav .tab8Class

また、を削除uしcolourて正しいcssを作成します。

background-color: white;
              ^
于 2013-03-08T11:02:36.783 に答える
2

使用する

#nav .tab8Class {

それ以外の：

.tab8Class {

これにより、セレクターがより具体的になります。

ここでCSSの特異性について読むことができます。

于 2013-03-08T11:02:01.603 に答える
1

bgカラールールを変更するだけで、すべてのルールを再度作成する必要はありません。

#nav a.tab8Class{

    background: #000 ; // change the color 

}

あなたがこれについて何かを読む必要がある特異性。

于 2013-03-08T11:01:34.333 に答える
1

2つのオプションがあります：

1）クラスを削除して、以下を使用します。

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

2）これはより下位互換性があります：

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

特別なホバー効果を追加したい場合（コメントに記載されているように）

#nav .tab8Class:hover{
     //Do something
}
于 2013-03-08T11:02:42.723 に答える
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;
}
于 2013-03-08T11:03:25.930 に答える
-2

jqueryで簡単にできます。jquery ライブラリを追加してください。

$(document).ready(function(){
    $('#nav a:eq(7)').addClass('tab8Class');
});
于 2013-03-08T11:05:10.047 に答える