纯css Chessboard与div,没有类或ID,是否可能？

Question

我有以下布局

<div id="chess">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

是否有可能只使用css制作棋盘而不更改上述html？这意味着没有类或ID.我一直在寻找2天的想法.我尝试了nth-child()和一些变化,但没有成功.

如果能做到这一点,我非常好奇.它是作为一个人的任务给出的.

所以,请问,任何想法？

Answer 1

您不必对每个硬编码:nth-child().这是缩短它的一种方法.每个选择器对应棋盘上的一行:

#chess div:nth-child(-2n+8), 
#chess div:nth-child(8) ~ div:nth-child(-2n+15), 
#chess div:nth-child(16) ~ div:nth-child(-2n+24),
#chess div:nth-child(24) ~ div:nth-child(-2n+31),
#chess div:nth-child(32) ~ div:nth-child(-2n+40),
#chess div:nth-child(40) ~ div:nth-child(-2n+47),
#chess div:nth-child(48) ~ div:nth-child(-2n+56),
#chess div:nth-child(56) ~ div:nth-child(-2n+63) {
    background-color: #000;
}

jsFiddle预览

Answer 2

这是一个有趣的问题.我认为棋盘更好地表达为一个表而不是一系列div,因为屏幕阅读器会指示数字所在的行和列.有桌子:

table tr:nth-child(odd) td:nth-child(even) {
  background: #000;
}
table tr:nth-child(even) td:nth-child(odd) {
  background: #000;
}

http://jsfiddle.net/9kWJZ/

Answer 3

以下方法利用着色图案每16个方块重复的事实(从左上角到右下角计数).因此,第一个规则#chess div:nth-child(16n+1)将方块1,17,33和49(换句话说,"第一列")着色.对于从3到16的所有彩色方块的附加规则重复这一过程,每个方块代表一个单独的列.

使用给定的标记,如果您使用nth-of-type或nth-child无论如何使用额外的标记都没关系,所以这nth-child是更明显的选择.

for(i=0;i<64;i++){chess.appendChild(document.createElement("div"))}

#chess div{
     width:22px;height:22px;border:1px solid black;
     float:left; 
}

#chess div:nth-of-type(16n+16),
#chess div:nth-of-type(16n+14),
#chess div:nth-of-type(16n+12),
#chess div:nth-of-type(16n+10),
#chess div:nth-of-type(16n+7),
#chess div:nth-of-type(16n+5),
#chess div:nth-of-type(16n+3),
#chess div:nth-of-type(16n+1){   
    background-color:black;
}

#chess div:nth-of-type(8n+1){   
    clear:left;
}

<div id="chess"></div>