html - 选择时列出的项目会改变颜色

Question

这是小提琴：http: //jsfiddle.net/SMftA/2/

如果选中它，我希望更改 mon 的背景颜色。如果它没有被选中，它应该是它最初创建的颜色。

我不确定为什么这不起作用。

我在想问题出在 mon 有一个班级和一个 id 吗？

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

Answer 1

它不起作用，因为您为 id 输入了第一个背景颜色，#mon这在 css 规则中比类输入最强。在这里你可以看到它何时工作：

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

我还将编辑您的 jsFiddle 并展示如何使其正常工作。

编辑

我把你的身份证改成班级。现在你有更少的行，这应该是这样的：

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