CSS HTML5 表<td>覆盖方式<tr>

Question

我有一个表，我已经将此css设置为td

.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #f9f9f9;
}

但我需要用另一种颜色覆盖单个tr行的背景颜色。

这可能吗？如果我不删除上面的这个样式，它就不起作用。

感谢

Answer 1

在td类之前设置tr样式将为其提供正确的特定性。

或者，给tr一个类别会增加它的特异性和id，甚至更高

最后，使用important将提供最大的特异性，并覆盖所有风格。

.table-striped>tbody>tr {
    background-color: #b00;
}
.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #f9f9f9;
}

<table class="table-striped">
  <tr>
    <td>row 1</td>
  </tr>
</table>

第N个子级：

我刚刚意识到"我认为"你正试图为你的单元格行做奇偶色。如果是这种情况，你应该这样做。

.table-striped tr {
    background-color: #b00;
}
.table-striped td:nth-child(odd), 
.table-striped th:nth-child(odd) {
    background-color: #f9f9f9;
}

<table class="table-striped">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
    

---

检查您的专业性

这里有一个在线检查器，它会告诉你什么风格会在战斗中获胜。按正确的顺序承受是创造特异性的最佳方式。

---

编辑

根据您的要求：

覆盖样式仍应应用于td，但应使用rows类。如果您希望黄色是交替的，只需将.table-striped .Yellow td移动到覆盖odd style之上。

.table-striped tr {
    background-color: #b00;
}
.table-striped td:nth-child(odd), 
.table-striped th:nth-child(odd) {
    background-color: #f9f9f9;
}
.table-striped .Yellow td{
    background-color: #ba0;
}

<table class="table-striped" cellspacing="0">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr class="Yellow">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

Answer 2

通常，我怀疑您的选择器是否需要像它们一样具体。它们越不具体，就越容易维护。

你可能正在沿着这些路线寻找的东西：

.table-striped tr:nth-child(odd) td {}
.table-striped tr.override-class:nth-child(odd) td {}