代码之家 › 专栏 › 技术社区 › WebbH

在react中的嵌套映射上使用css nth子级

reactjs css

WebbH · 技术社区 · 8 年前

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

        <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子css选择器将所有奇数方块都着色为一种颜色,但到目前为止,我还没能得到任何效果。我试过了 table tr td: nth-child(odd){background: blue;} 这也不管用。这是我可以用我创建网格的方式做的吗?

2 回复 | 直到 8 年前

Paulie_D 8 年前

我假设你需要 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;
}

<表>
<td></td>
<td></td>
<td></td>
<tr>
<td></td>
<td></td>
</tr>
<td></td>
<td></td>
<td></td>
</tr>
<td></td>
<td></td>
<td></td>
<tr>
<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>

-1

Shubhanu Sharma 8 年前

<div>
  <span></span>
  <span></span> 
  <span></span> 
  <span></span>
  <span></span> 
  <span></span> 
  <span></span>
</div>

span {
  width: 20px;
  height: 20px;
  background: #ddd;
  display: inline-block;
}
span:nth-child(2n+1) {
  background: #000;
}

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