css - 覆盖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>时添加了一个新类一样。例如，如果您添加一个名为then 的 类，则看起来像这样。完成此功能后，添加如下样式：-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班级。由于上面写的样式被下面的样式覆盖。