没有伪类的国际象棋表

Question

如果我不能在HTML代码中进行更改，只添加STYLE标记中的样式，将表导入表格，如何创建国际象棋表，如右图所示。伪选择器 ：不使用第n个孩子（i），第n孩子（an + b），第n个类型（i），第n个类型（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> 

Answer 1

虽然nth-of-type(i)和nth-of-type(an + b)是不允许的，我猜，这并不意味着nth-of-type(even|odd)都出来了？如果是这样，CSS很简单：只要让里面甚至tr一切都甚至td S和所有奇数td的内线奇tr的黑：

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

这里的工作JSFiddle。干杯!