0

我正在为我的 php 网站制作日历视图。我有一张有 n 行的桌子。在那张桌子上，奇数行有浅绿色背景，甚至有浅粉色背景。

之后我有一些 div 放在相应的 tr 上，带有 z-index: 8 css 属性。

但我想给他们比背景表行更暗的背景。

像粉红色行上的 div 应该有深粉红色背景，绿色行 div 应该有深绿色背景。

表和 div 都是由 jquery 代码自动开发的。

任何人都可以帮助我，我怎么能做到这一点？

我在 jquery fullcalendar 资源视图中执行此操作。

我的一些 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 回答