Question

我有一张桌子，我已将 td 设置为此css：

.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一个类将增加它的特异性，并且更加如此。

最后使用重要内容会给出最大的特异性并覆盖所有风格。

.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>

Nth Child：

我刚刚意识到 “我认为” 你正试图为你的细胞行做奇怪的颜色。如果是这种情况，你应该这样做。

.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>

<强> CHECK YOUR SPECIFICITY

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

<强> EDITS

根据您的要求：

覆盖样式仍应应用于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 {}

CSS HTML5表覆盖

2 个答案: