Question

这是我用于更改表格行颜色的CSS：

.table-striped > tbody > tr:nth-child(odd) > td {
       background-color: #cceeff;   /* Blue color */


}

.accepted.table-striped > tbody > tr:nth-child(odd) > td {
       background-color: #ccffaa; /* green color */


}

第二个选择器没有任何效果。
我希望接受类的行是绿色的，那么我该怎么做呢？

编辑：
https://jsfiddle.net/qaueqe6u/

Answer 1

如果您只想要带有＆＃34;接受＆＃34;的行这个css是绿色的，这个css是错误的，因为你假设这个课程将与'.table-striped＆＃39; class，用于表元素，而不是行。检查这个简单的小提琴，以便更好地理解：

https://jsfiddle.net/gmmbuer8/

由于您只想定位该行，因此正确的CSS将是：

.table-striped > tbody > .accepted {
   background-color: #ccffaa; /* green color */
}

＆＃39;：nth-child（odd）＆＃39;只有当你希望它具有条纹＆＃39;效果。

Answer 2

我错过了什么吗？

.table-striped > tbody > tr:nth-child(odd) > td {
  background-color: #cceeff; /* blue */
}
.table-striped > tbody > tr.accepted > td {
  background-color: #ccffaa; /* green */
}

<table class="table table-striped">
    <thead><tr><th>Name</th></tr></thead>
    <tbody>
        <tr ><td>Reza</td></tr>
        <tr ><td>Reza</td></tr>
        <tr><td>Reza</td></tr>
        <tr class="accepted"><td>Reza</td></tr>
        <tr class="accepted"><td>Reza</td></tr>
    </tbody>
</table>

<强> Fiddle

Answer 3

试试这个：

.table-striped.accepted > tbody > tr:nth-child(odd) > td {
   background-color: #ccffaa; /* green color */
}

使用css选择器更改表行颜色

3 个答案: