多個類名稱和應用CSS取決於類名稱組合

我很難理解如何根據類名稱組合應用多個CSS。多個類名稱和應用CSS取決於類名稱組合

我有兩個div標籤這樣

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

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

現在我想申請取決於類名組合例如兩種不同的風格，當類名稱爲上和應用的話，我想背景顏色是紅色的。當類名稱爲NE和應用然後我想背景顏色是綠色的......等等

我嘗試這樣做：

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

，但它不工作它只是將一種顏色。

對此有何定義？使用Jquery的解決方案對我來說也很好。謝謝！

有完整的代碼更新

五月值得一提的，因爲我做我的CSS聲明是正確的。我正在使用FullCalendar，我將一個className傳遞給fullCalendar事件。當我使用螢火蟲時，我看到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>

來源

2012-09-22 VBJ

app or appr ?? ...在我們的問題類名是'app'＆in code'appr' – rynhe

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

改變這種

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

到

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

你錯過了第二CSS聲明中的「＃」。嘗試添加到顏色。如果這不起作用，那麼你會以某種方式壓倒你的css文件。

來源

2012-09-22 05:26:51 Stone

對不起，我有＃...這是錯字以上..我糾正它。 – VBJ

你是代碼作品。你正在覆蓋你的css文件中的其他地方。在這裏證明：http://jsfiddle.net/FMuh9/ ...你可能還想添加display：block;如果你不是這樣的話，那麼你的分區。 – Stone

好吧......事實上，我在以及其他任何其他風格的鏈接文件中的上述樣式..仍然不知道爲什麼只有最後一種顏色應用。 – VBJ

多個類名稱和應用CSS取決於類名稱組合

回答

相關問題