可以选择第二列，并添加背景色为第二列的奇数行？

Question

我想选择第二TR，然后选择只有奇TD只有SCSS

我只是不希望添加更多的JavaScript，如果它可以通过CSS来实现。我努力了

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/类

Answer 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

Answer 2

注意：你的头在你的问题的文本要求不同的东西。

所以，首先我回答这个问题中的文本（“选择第二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列，并添加背景断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>