在另一个 nth-child 中使用 nth-child

Question

<table>
    <tr>
      <th>heading a</th>
      <th>heading b</th>
      <th>heading c</th>
    </tr>
    <tbody>
      <tr>
        <td>Blue</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
      <tr>
        <td>White</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
      <tr>
        <td>Blue</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
    </tbody>
  </table>

以上是此问题的示例 table。因此，首先给出一些上下文，我想创建一个 table 并冻结第一列。我通过 selecting tr 的第一个 child td 并将位置设置为绝对位置并向我用来更改的 css 的 left.Because 添加填充来完成此操作每隔一行的背景颜色在第一列中不可用。现在我想为 td 的每个 first-child 添加背景颜色，所以我尝试了

td {
  &:first-child {
    position:absolute;
    left:0;
        &:nth-child(even){
          background-color: blue;
          }
    }
}

但这仍然是 selecting 所有第一个 td 元素。

我的问题是为什么会出现这样的行为，有没有办法 select 我想要的元素？

Answer 1

我有点困惑，但这是你想要的吗？

td:first-child {
    position:absolute;
    left:0;
}
tr:nth-child(even){
    background-color: blue;
}

<table>
    <tr>
      <th>heading a</th>
      <th>heading b</th>
      <th>heading c</th>
    </tr>
    <tbody>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
    </tbody>
  </table>

Answer 2

我想这就是你想要的吧？

tr:nth-child(odd) td:first-child {
  position:absolute;
  left:0;
  background-color:blue;
}

<table>
    <tr>
      <th>heading a</th>
      <th>heading b</th>
      <th>heading c</th>
    </tr>
    <tbody>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
    </tbody>
  </table>

td:first-child {
    position:absolute;
    left:0;
}
tr td:not(:first-child){
    background-color: blue;
}

<table>
    <tr>
      <th>heading a</th>
      <th>heading b</th>
      <th>heading c</th>
    </tr>
    <tbody>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
      </tr>
    </tbody>
  </table>

在另一个 nth-child 中使用 nth-child

Using nth-child within another nth-child

html

css

sass