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>

，这是我只希望前3行针对的第二行td。现在我尝试这样

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

Answer 2

如果我正确地理解您的话，那确实是可能的。您的代码存在一些问题，您没有选择任何内容，因为info-table-cell是td。这是我的方法：

HTML

<table class="your-specific-class">
  <tr>
    <td class="info-table-cell">Content 1</td>
    <td class="info-table-cell">Content 2</td>
  </tr>
  <tr>
    <td class="info-table-cell">Content 1</td>
    <td class="info-table-cell">Content 2</td>
  </tr>
  <tr>
    <td class="info-table-cell">Content 1</td>
    <td class="info-table-cell">Content 2</td>
  </tr>
</table>

CSS

.your-specific-class tr:nth-child(1) td:nth-child(2){
  background-color: #FFF45E;
}
.your-specific-class tr:nth-child(2) td:nth-child(2){
  background-color: #DCDCDC;
}
.your-specific-class tr:nth-child(3) td:nth-child(2){
  background-color: #FFC933;
}

此处的示例：https://codepen.io/lauritzz77/pen/XoLjXr

仅在前三行使用CSS Target 2nd td

2 个答案: