jquery - 多个类名并根据类名组合应用 CSS

Question

我发现很难理解如何根据类名组合应用多个 CSS。

这样我有两个div标签

<div class="on appr">
  <div class"sc"> Text1 </div></div>

<div class="ne appr">
  <div class"sc"> Text1 </div></div>

现在我想根据类名组合应用两种不同的样式例如，当类名是 on 和 app 时，我希望背景颜色为红色。当类名是 ne 和 app 时，我希望背景颜色是绿色...等等

我试过这个:

.on.appr{background-color: #7FFFE7;} 
.ne.appr{background-color: #49EEAA;}

但它不起作用，它只是应用了一种颜色。

请帮忙定义这个？使用 Jquery 的解决方案对我来说也很好。谢谢!

更新完整代码

可能值得一提，因为我在我的 CSS 声明中做的是正确的。我正在使用 FullCalendar 并将 className 传递给 fullCalendar 事件。当我使用 Firebug 时，我看到我传递给日历事件的类名。

下面是我在 Firebug 中看到的日历条目。

<div class="fc-event fc-event-skin fc-event-hori on appr"
     style="position: absolute;    z-index: 8; left: 0px; width: 1100px; top: 307px;">
    <div class="fc-event-inner fc-event-skin">
    <span class="fc-event-title">(on)Jeff</span>
    </div>
    </div>

下面是我的 .jsp 文件中的代码。

 <style type="text/css">

.pen .fc-event-skin
    {
border-color:red;
color:red;
font-weight: bold; 
font-size: 10pt;
background-color: yellow;
    }


.on.appr.fc-event-skin
{
background-color: green;
font-weight: bold; 
font-size: 10pt;
}

   .ne.appr.fc-event-skin
{
background-color: red;
color:yellow;
font-weight: bold; 
font-size: 10pt;

}

</style>

Answer 1

.on.appr{background-color: #7FFFE7;}

改变这个

.ne.appr{background-color: 49EEAA;} 

到

.ne.appr{background-color: #49EEAA;} 

您在第二个 CSS 声明中缺少“#”。尝试将其添加到颜色中。如果这不起作用，那么您将以某种方式在您的 css 文件中覆盖它。