3

ウェブサイトの上部にあるヘッダーに 3 つのメニュー項目があります (現在は公開されていないため、リンクを提供できません - 申し訳ありません)。3 つの「ボタン」は、CSS ボタンの意味でのボタンではありません。画像にレンダリングされたテキストです (理想的ではありませんが、きれいに見えるので...)。

とにかく、各画像には異なるバージョンが含まれています。1 つはデフォルトの外観用、1 つはマウスオーバー用、もう 1 つは onclick/active 用です。これまでに使用した html と CSS は次のようになります。

HTML

<li>
    <a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
    <a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
    <a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background: url(../Buttons/About.png) no-repeat 0 0; width: 87px;}
#Services {background: url(../Buttons/Services.png) no-repeat 0 0; width: 112px;}
#Contact {background: url(../Buttons/Contact.png) no-repeat 0 0; width: 117px;}
a.button {height: 20px; display: inline-block;}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

なんらかの理由で、「ホバー」および「アクティブ」状態は効果がありません。ID の代わりにボタンごとにクラスを定義すると、問題なく動作することに注意してください。ただし、これは意味がありません。ボタンにはそれぞれ独自のイメージと幅があり、一意です (これが、クラスではなく ID を指定した理由です)。

誰かが私が間違っている場所を説明できますか? 私はこれらすべてに慣れていないので、説明は素人の言葉で行う必要があります。

4

2 に答える 2

1

問題は、ID セレクターがクラス + 疑似セレクターの組み合わせよりも具体的であることです。ただし、ID セレクターで位置を指定しなければ問題ありません。例えば：

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}
于 2012-11-30T16:12:18.280 に答える
0

ID では機能しないが、クラスでは機能する理由は、ID がより「具体的」であるためオーバーライドされるためです。

競合が発生した場合、CSS の優先順位には、スタイルが要素にどの程度具体的に一致するかが含まれ、取得できる最も具体的な ID が含まれます。

クラスだけを使用したくない理由はありますか? セマンティック Web では、まさにこの状況を処理する方法として、一般にクラスが好まれます。

于 2012-11-30T16:09:57.660 に答える