css - 在 React 的嵌套 map 上使用 CSS nth-child

Question

我使用表格和二维数组构建了一个网格，如下所示:

        <table className = 'table'>
            <tbody>
              {this.state.board.map((x,i)=>{
                return(
                  <tr key = {i} className = {"row"}>
                    {x.map((y,j) => {
                      return (
                        <td key ={j} className = {"col"}>

                        </td>
                      )
                    })}
                  </tr>
                )
              })}
          </tbody>
        </table> 

这会在屏幕上打印一个漂亮的 8x8 网格。我试图找出一种方法来使用第 nth-child css 选择器为所有奇数方 block 着色一种颜色，但到目前为止我还没有得到任何工作。我试过 table tr td: nth-child(odd){background: blue;} 也没有用。这是我实际上可以用我创建网格的方式做的事情吗？

Answer 1

我假设您需要一个 checkerboard 模式。

在那种情况下你需要两个选择器

table tr:nth-child(odd) td:nth-child(odd),
table tr:nth-child(even) td:nth-child(even) {
  background: pink;
}

table {
  margin: 1em auto;
}

td {
  border: 1px solid black;
  padding: 1em;
}

table tr:nth-child(odd) td:nth-child(odd),
table tr:nth-child(even) td:nth-child(even) {
  background: pink;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

或者，如果您实际上只想要“奇数”单元格，那么一个选择器就可以工作

table tr td:nth-child(odd) {
  background: pink;
}

table {
  margin: 1em auto;
}

td {
  border: 1px solid black;
  padding: 1em;
}

table tr td:nth-child(odd) {
  background: pink;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>