可以选择第 2 列并为第 2 列的奇数行添加背景颜色吗？答案

【问题标题】：Possible to select 2nd column and add background color for odd row of 2nd column?可以选择第 2 列并为第 2 列的奇数行添加背景颜色吗？
【发布时间】：2019-02-12 01:53:16
【问题描述】：

我想选择 2nd tr 然后只选择奇数 td 仅使用 SCSS

如果可以通过 CSS 完成，我只是不想添加更多的 javascript。我试过了

tr td:nth-child(2) {
  &::nth-child(odd) {
    backgroud: red;
  }


}

<table>
  <tr>
    <td>123</td>
    <td>345</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

这是我期待的结果。但只有css选择器不使用像red这样的类 https://jsfiddle.net/9g436bds/

【问题讨论】：

标签： css sass css-selectors

【解决方案1】：

根据您的需要，实现此目的的一种方法是同时定位 tr 和 td

tr td:nth-child(2) {
  background-color: grey;  
}

tr:nth-child(odd) td:nth-child(2) {
  background: blue;
}

https://codepen.io/anon/pen/jdxwBE

【讨论】：

链接有一些问题，我认为它只是永远加载。而且您选择的是 2 行而不是列。 tr td:nth-child(2) 这是选择第二列。添加的链接显示预期结果。谢谢

【解决方案2】：

注意：您的标题和问题中的文本要求不同的内容。

所以，首先我要回答问题中的文字（“选择 2nd tr 然后只选择奇数 td”）：

无论有没有 SCSS，选择器都是 tr:nth-child(2) td:nth-child(odd):

tr:nth-child(2) td:nth-child(odd) {
    background: red;
}

<table>
  <tr>
    <td>123</td>
    <td>345</td>
    <td>123</td>
    <td>345</td>
  </tr>
  <tr>
    <td>123</td>
    <td>345</td>
    <td>345</td>
    <td>765</td>
  </tr>
  <tr>
    <td>rtz</td>
    <td>123</td>
    <td>345</td>
    <td>gfd</td>
  </tr>
  <tr>
    <td>678</td>
    <td>123</td>
    <td>345</td>
    <td>bvc</td>
  </tr>
</table>

这是标题中问题的答案（“选择第 2 列并为 off td 添加背景”）。非常相似的选择器，但是伪类转了：

tr:nth-child(odd) td:nth-child(2) {
    background: red;
}

<table>
  <tr>
    <td>123</td>
    <td>345</td>
    <td>123</td>
    <td>345</td>
  </tr>
  <tr>
    <td>123</td>
    <td>345</td>
    <td>345</td>
    <td>765</td>
  </tr>
  <tr>
    <td>rtz</td>
    <td>123</td>
    <td>345</td>
    <td>gfd</td>
  </tr>
  <tr>
    <td>678</td>
    <td>123</td>
    <td>345</td>
    <td>bvc</td>
  </tr>
</table>

【讨论】：