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

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>

这是标题中的问题的答案（“选择第二列并为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>

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

2 个答案: