0

PHP Web サイトのカレンダー ビューを作成しています。n 行のテーブルが 1 つあります。そのテーブルでは、奇数行の背景が薄緑色で、背景が薄ピンクですらあります。

その後、z-index: 8 css プロパティを持つ対応する tr に配置される div がいくつかあります。

しかし、背景のテーブル行よりも暗い背景を与えたいです。

ピンクの行に来る div は濃いピンク色の背景を持つ必要があり、緑の行の div は濃い緑色の背景を持つ必要があります。

テーブルと div の両方が jquery コードによって自動的に開発されています。

どうすればこれを達成できますか？

jquery fullcalendar resource view でやっています。

私のいくつかのhtmlとcssコードは次のとおりです。

css :

.fc-border-separate tr th{
background: #BFDBFF;
}
.fc-border-separate tr:nth-child(odd) td{
background: #D7FFD7; 
}
.fc-border-separate tr:nth-child(even) td{
background: #FFD5FF;
}
.fc-event {
border-style: solid;
border-width: 0;
font-size: .85em;
cursor: default;
}

 a.fc-event,
 .fc-event-draggable {
cursor: pointer;
}

a.fc-event {
text-decoration: none;
}

.fc-rtl .fc-event {
text-align: right;
}

.fc-event-skin {
border-color: #36c;     /* default BORDER color */
background-color: #36c; /* default BACKGROUND color */
color: #fff;            /* default TEXT color */
}

.fc-event-inner {
position: relative;
width: 100%;
height: 100%;
border-style: solid;
border-width: 0;
overflow: hidden;
}

html :

 <table class="fc-border-separate tblcalendar">
 </table>

 <div class='fc-event fc-event-skin fc-event-inner' style='position: absolute; z-index:8'>
 </div>
4

1 に答える 1

0

これはあなたが探しているものですか？

基本的な考え方は、疑似クラス:nth-child(odd)and:nth-child(even)を次のように使用することです。

tr:nth-child(odd) {
    background-color:lightgreen;
    height:60px;
}

tr:nth-child(even) {
    background-color:pink;
}

tr:nth-child(odd) div {
    background-color:green;
}

tr:nth-child(even) div {
    background-color:red;
}
于 2013-02-19T23:35:35.523 に答える