Question

我使用表格和2D数组构建了一个网格，如下所示：

        <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选择器为所有奇数方块上色的方法，但是到目前为止，我还无法使任何事情起作用。我已经尝试过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>

Answer 2

Sub CommandButton1_Click()

    a = Worksheets("Sheet1").UsedRange.Rows.Count

    b = 0

    For i = 2 To a

        If Worksheets("Sheet1").Cells(i, 3).Value = "AMC" Then

            Worksheets("Sheet1").Rows(i).Copy

            Worksheets("Sheet2").Activate

           ' b = ActiveSheet.UsedRange.Rows.Count

            Worksheets("Sheet2").Cells(b + 1, 1).Select

            ActiveSheet.Paste

            Worksheets("Sheet1").Activate

        End If

    Next

    Application.CutCopyMode = False

    ThisWorkbook.Worksheets("Sheet1").Cells(1, 1).Select

End Sub

工作小提琴https://jsfiddle.net/jzw0m61v/5/

在React的嵌套地图上使用CSS nth-child

2 个答案: