Question

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

我有两个div标签

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

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

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

我试过了：

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

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

请帮忙定义一下吗？使用Jquery的解决方案对我来说也没问题。谢谢！

使用完整代码进行更新

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

以下是我在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文件。

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

1 个答案: