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

Question

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

如果可以通过 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选择器不使用像红色这样的类 https://jsfiddle.net/9g436bds/

标签： csssasscss-selectors

Answer 1

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

所以，首先我要回答问题中的文本（“选择 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>