Question

我希望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;
}

列出的项目在选择时会更改颜色

2 个答案:

修改