0

クラス名の組み合わせによっては、複数のCSSを適用する方法がわかりにくいです。

私はこのように2つのdivタグを持っています

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

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

ここで、クラス名の組み合わせに応じて2つの異なるスタイルを適用したいと思いました。たとえば、クラス名がオンでアプリの場合、背景色を赤にします。クラス名がneでアプリの場合、背景色を緑にします...など

私はこれを試しました：

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

しかし、それは機能していませんでした。それはただ1つの色を適用しているだけです。

これを定義するための助けはありますか？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>
4

1 に答える 1

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

これを変える

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

に

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

2番目のCSS宣言に「＃」がありません。それを色に加えてみてください。それが機能しない場合は、cssファイルのさらに下でオーバーライドしています。

于 2012-09-22T05:26:51.070 に答える