0

私はこのコードを書きました：

CSS：

#header {
    margin: 0;
    background:gray;
}

#tabs {
    color:yellow;
    font-weight: bolder;
    display:inline;
}

HTML：

<div id="header"> 
     <h1>Tabs</h1>
     <ul id="tabs">
         <li id="tabs"><a href="#">This</a></li>
         <li id="tabs"><a href="#">That</a></li>
         <li id="tabs"><a href="#">The Other</a></li>
         <li id="tabs"><a href="#">Banana</a></li>
    </ul>
</div>

liただし、黄色のフォントの色はアイテムに適用されていません。なぜこうなった？そして、正しい出力を得るために、このコードをどのように書くべきですか？

4

4 に答える 4

6

同じIDを持つ要素が複数ある場合、通常は最初の要素にのみ適用されます。要素には一意のIDが必要です。代わりにクラスを使用してください。

HTMLドキュメントのグローバル構造から：

id属性は、要素に一意の識別子を割り当てます

一方、class属性は、1つ以上のクラス名を要素に割り当てます。要素はこれらのクラスに属していると言えます。クラス名は、複数の要素インスタンスで共有される場合があります

したがって、コードは次のようになります。

<li class="tabs"><a href="#">This</a></li>
<li class="tabs"><a href="#">That</a></li>
<li class="tabs"><a href="#">The Other</a></li>
<li class="tabs"><a href="#">Banana</a></li>

#IDの場合.、クラスの場合。複数の要素が同じクラスを持つことができます。また、のリンクの色を変更したいliので、CSSで次のように指定します。

.tabs a
{
 color:yellow;
 font-weight: bolder;
 display:inline;
}
于 2012-08-03T15:06:21.213 に答える
4

テキストがリンクの中にあるからです。次のように、タブ内のリンクの色を指定する必要があります。

#tabs a{color:yellow}

それが機能するために。

また、同じIDを2回使用しないでください。私が提供したコードを使用すると、lisからIDを削除できます。

于 2012-08-03T15:05:44.967 に答える
2

タグaが優先される可能性があります。その色を継承するように設定します。

#tabs {
    color: yellow;
}
#tabs a {
    color: inherit;
}

を設定することもできますtext-decoration: none;。

于 2012-08-03T15:05:30.703 に答える
2

開始するには、IDをオフにする必要があります<li>。IDは一意です。

あなたが実際に問題としているのは、リンク自体をターゲットにしていないことです。

#tabs a {
    color: yellow;
}

これにより、リンクではなくスタイルをリンクに適用できるようになります。<ul>

于 2012-08-03T15:05:35.777 に答える