没有伪类的国际象棋表答案

【问题标题】：chess table without pseudo classes没有伪类的国际象棋表
【发布时间】：2016-03-12 07:00:50
【问题描述】：

如果我不能更改 HTML 代码，我如何创建棋表，只在 STYLE 标记中添加样式，将表引导到表格，如右图所示。伪选择器 : Not,:nth-child (i),:nth-child (an + b),:nth-of-type (i),:nth-of-type (an + b) 不使用。

表格是 10*10。我只能创建绿色边框。我只需要国际象棋标记（白色和黑色）。

<style>     
  table.ches td
  {
    width: 100px;
    height: 100px;
    border: solid black 2px;
  }

 table.ches  tr :first-child{background:  green;
    color:  black;}

    table.ches tr:first-child>td {background:  green;
    color:  red;}

     table.ches tr:last-child>td {background:  green;
    color:  black;}

     table.ches  tr :last-child{background:  green;
    color:  black;}

</style>

<table class="ches">
<tbody><tr>
  <td></td><td></td><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><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><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><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><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><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><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><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><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><td></td><td></td>
</tr>
</tbody></table>

</body>

【问题讨论】：

标签： css html chess chessboard.js

【解决方案1】：

虽然nth-of-type(i) 和nth-of-type(an + b) 是不允许的，但我猜这并不意味着nth-of-type(even|odd) 被淘汰了？如果是这样，那么 CSS 很简单：只需将偶数 trs 内的所有偶数 tds 和奇数 trs 内的所有奇数 tds 设为黑色：

tr:nth-of-type(even) td:nth-of-type(even),
tr:nth-of-type(odd) td:nth-of-type(odd) {
    background: black;
}

这是一个有效的JSFiddle。干杯！

【讨论】：