覆盖css类

Question

使用css时遇到麻烦，在下面的代码中，我使用了奇数和偶数类的css来改变背景颜色。但只要有备份（如突出显示），它就应该将值显示为斜体以及奇数和偶数属性。如何实现这个目标？

<c:forEach items="${as.value.connections}" var="circuit" varStatus="elements">
                    <c:set var="stylesheetclass" value="primaryLine"/>
                    <c:set var="icon" value="/images/primary.png"/>
                    <c:if test="${circuit.backup}">

> <c:set var="stylesheetclass" value="backupLine"/>
> 
> 
> <c:set var="icon" value="/images/backup.png"/>

                    </c:if>



> <tr class="${elements.index % 2 == 0 ? 'odd' : 'even'}">


                        <td >

Answer 1

使用了这个!important

tr.odd{
background:red !important;
}

---

tr.even{
background:yellow !important;
}

Answer 2

尝试使用css选择器，您不需要在DOM中指定类。

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

然后只需添加备份类。

请确保在偶数和奇数规则之后定义.backup类，这样就不会覆盖任何内容。

Answer 3

首先，如果您在备份值存在时，<tr>中添加了一个新类，那么您就可以使用该功能。例如，如果您添加名为backup的类，则<tr>将显示为此<tr class="odd backup"> or <tr class="even backup">。完成此功能后，添加如下样式： -

tr.odd {
    /* your styles already used*/
}
tr.even {
    /* your styles already used*/
}
tr.backup {
    font-style: italic; /* This would take effect for the <tr> which has backup class added */
}

编辑：

如果您要为<tr>课程中的备份.backup放置要保留的样式，则可以实现您的要求。 请将.backup班级保留在.even and .odd班级以下。上面写的样式会被下面的样式覆盖。