纯css棋盘与div&没有类或ID，这是可能的吗？ [英] Pure css Chessboard with div & no classes or ids, is it possible?

问题描述

我有以下布局：

 < 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（）和一些变体，但没有成功。

如果可以这样做，我非常好奇。它是作为一个转让给某人。

所以，请你有任何想法吗？ 你不必为每个：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： （-2n + 56），
 #chess div：第n个孩子（56）〜div：第n个孩子（-2n + 63）{
 background-color：＃000; 
} 
  

jsFiddle预览

I have the following layout

<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>

Is it possible to make a chess board using only css and without changing the above html? That means no classes or ids. I've been searching for ideas an such for 2 days now. I tried with nth-child() and some variations but no success.

I am awfully curious if this can be done. It was given as an assignment to someone.

So please, any ideas?

解决方案

You don't have to hardcode each :nth-child(). Here's one way to shorten it. Each selector corresponds to a row on the chessboard:

#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 preview

这篇关于纯css棋盘与div&没有类或ID，这是可能的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！