html - リストされたアイテムを選択すると色が変わる

Question

これがフィドルです：http://jsfiddle.net/SMftA/2/

選択されている場合、月の背景色を変更したい。選択されていない場合は、最初に作成されたときの色になります。

なぜこれが機能しないのかわかりません。

問題は、クラスとIDを持つmonにあると思いますか?

    <li id="mon" class="selected">Mon</li>

Answer 1

#monクラス入力よりもCSSルールで最強のidの最初の背景色を入力しているため、機能していません。ここで、いつ機能するかを確認できます。

http://jsfiddle.net/SMftA/3/

また、jsFiddle を編集し、これをうまく機能させる方法を示します。

編集

あなたのIDをクラスに変更します。これで行が少なくなり、次のようになります。

http://jsfiddle.net/SMftA/4/

Answer 2

ここにセレクターの特異性の問題があります。ID セレクターは、クラス セレクターよりも優先されます。この問題を解決するには、UL に ID を追加し、選択したクラスに対して次のようにより高い特異性を作成します。

http://jsfiddle.net/8MQSu/

HTML:

<ul id="day-container">
    <li id="mon" class="selected">Mon</li>
    <li id="tue">Tue</li>
    <li id="wed">Wed</li>
    <li id="thu">Thu</li>
    <li id="fri">Fri</li>
    <li id="sat">Sat</li>
    <li id="sun">Sun</li>
</ul>

CSS:

#chooseDays{
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    width:250px;
}

#mon{
    background-color:#D1F7CE;
    clear: none;
    float:left;
    margin-right:5px;
    list-style-type: none;
}
#tue{
    background-color:#FCF4BB;
    clear: none;
    float:left;
    margin-right:5px;
    list-style-type: none;
}
#wed{
    background-color:#F7D0CE;
    clear: none;
    float:left;
    margin-right:5px;
    list-style-type: none;
}
#thu{
    background-color:#CED2F7;
    clear: none;
    float:left;
    margin-right:5px;
    list-style-type: none;
}
#fri{
    background-color:#CEF6F7;
    clear: none;
    float:left;
    margin-right:5px;
    list-style-type: none;
}
#sat{
    background-color:#CCCCCC;
    clear: none;
    float:left;
    margin-right:5px;
    list-style-type: none;
}
#sun{
    background-color:#FFE6F4;
    clear: none;
    float:left;
    margin-right:5px;
    list-style-type: none;
}

#day-container .selected
{
    background-color:#000;
}