0

これは私のhtmlコードです:

<div id="tabs">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#about">About Me</a></li>
        <li class="gold"><a href="#book">All About Love</a></li>
        <li class="gold"><a href="#fashion">Fashion Corner</a></li>
    </ul>

class="gold"最後の2つにaがあることに注意してくださいli

今、このクラスの色を変更したいので、試しました:

#tabs li .gold{
    color:#CCFF00;
}

と

.gold{
    color:#CCFF00;
}

しかし、それらのどれも機能していません。これらのコードが機能しない理由を教えてください。

参考までに、#tabs liセレクターは完全に機能しています。

助けてくれてありがとう:D

4

3 に答える 3

1

クラスと対応する要素の間のこのスペースを取り除きます。コードを読み取るヒラルキーはブラウザーにとって重要であることを覚えておいてください。同じセレクターに一致する場合、後のステートメントは以前のステートメントを上書きします。

<style>
#tabs li a {
   /*here you style your anchor*/
    color: #CC0000;
}

#tabs li.gold a {
    /*here you style the golden one after the standard is given above */
    color: #CCFF00;
}

#tabs li { 
    /*here you would style your text inside li,
      but not the anchors inherited styling from the browser */
} 
</style>
于 2013-05-13T05:42:12.330 に答える
1

に変更する必要があります

#tabs li.gold{
color:#CCFF00;
}

と

.ゴールド{色:#CCFF00;

正常に動作しています。これを試してくださいhttp://jsfiddle.net/rajeswarik/FaKv5/1/

于 2013-05-13T05:42:14.057 に答える