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

Question

我想选择第二个 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/

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