CSS Target 2nd td 仅位于前 3 行

Question

好吧，我有一个非常具体的 css，我需要为前 3 行设置，并且只在这 3 行的第二个 td 上设置。有没有办法在CSS规则中只针对它们？

现在我正在尝试这样

这是渲染图

  <tr className={getRowColor(props, l, i)}>
                                <td>{i + 1}</td>
                                <td className="info-table-cell{l.info}</td>
                            </tr>

这是该行中的第二个 td，我只想将其定位为前 3 行。现在我尝试这样

.info-table-cell td:nth-child(1) {
  background-color: #FFF45E;
}

.info-table-cell td:nth-child(2) {
  background-color: #DCDCDC;
}

.info-table-cell td:nth-child(3) {
  background-color: #FFC933;
}

但这没有任何作用。谁知道如何做到这一点？

Answer 1

希望这对您有帮助。我为前 3 行的 nd td 添加了红色背景颜色。尝试一下：

table {
  width: 100%;
}
table tr td {
  border: 1px solid #000;
}
table tr:first-child td:nth-child(2),
table tr:nth-child(2) td:nth-child(2),
table tr:nth-child(3) td:nth-child(2) {
  background-color: red;
}

<table>
  <tr>
    <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>
  <tr>
    <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>
  <tr>
    <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>