Question

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

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

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

喜欢粉红色行的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>

Answer 1

Is this what you're looking for?

基本思想是使用伪类:nth-child(odd)和: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;
}

如何给div提供深色背景而不是原始背景？

1 个答案: