带有 div 且没有类或 id 的纯 css 棋盘，这可能吗？

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

这是一个有趣的问题。 我认为将棋盘表示为表​​格比表示为一系列 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 2

您不必对每个: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 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>

Answer 4

在纯 CSS 中，接受的答案看起来是正确的——但是，如果你想用 SCSS 缩短它，你可以做一些数学计算：

#chess {
  div {
    background: #fff;
    /* even children on odd rows, odd children on even rows */
    @each $offset in 2 4 6 8 9 11 13 15 {
      &:nth-child(16n + #{$offset}) {
        background: #000;
      }
    }
  }
}

Answer 5

当然可以做到...

body {
    background-image:
    -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
    -moz-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    background-image:
    -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%),
    -webkit-linear-gradient(45deg, #000 25%, transparent 25%,transparent 75%, #000 75%, #000 100%);
    -moz-background-size:100px 100px;
    background-size:100px 100px;
    -webkit-background-size:101px 101px;
    background-position:0 0, 50px 50px;
}

Answer 6

您不能使用nth-child(odd)或nth-child(even)为方块着色，因为并非所有“奇数”或“偶数”方块都是相同的颜色。 从左上角位置“1”开始计数，第一行的白色方块将是 1、3、5、7。继续进入第二行，白色方块将是 10、12、14、16。第三行将是回到奇数，17、19、21 和 23。

因此，您可以手动为每个方块着色，如下所示：

#chess {
    /* 8 squares at 30x30px per square */
    width: 240px;
    height:240px;
    background:#000;
}

#chess div {
    width:30px;
    height:30px;
    float:left;
}

#chess div:nth-child(1), /* first row */
#chess div:nth-child(3),
#chess div:nth-child(5),
#chess div:nth-child(7),
#chess div:nth-child(10), /* second row */
#chess div:nth-child(12),
#chess div:nth-child(14),
#chess div:nth-child(16)
/* ... up to 64 ... */
{
    background:#fff;
}

Answer 7

我意识到我迟到了，这个问题已经有几个很好的答案。

我只想添加一个我发现在处理高级:nth-child选择器时易于管理的解决方案。 它有点冗长，不像其他一些建议那么优雅，但我发现它很容易阅读和处理。

通过链接:nth-child伪类，您可以将选择限制在某些范围内。 在伪代码中，它可以布置为：

:nth-child( start of range ):nth-child( children to select ):nth-child( end of range )

这可用于为国际象棋棋盘逐行着色，如下所示：

/* Start at 1st square, color odd squares until the 8th */
#chess :nth-child(n+1):nth-child(odd):nth-child(-n+8),

/* Even squares from 9th to 16th */
#chess :nth-child(n+9):nth-child(even):nth-child(-n+16),

/* Odd squares from 17th to 24th */
#chess :nth-child(n+17):nth-child(odd):nth-child(-n+24),

/* Even squares from 25th to 32nd */
#chess :nth-child(n+25):nth-child(even):nth-child(-n+32),

/* Odd squares from 33rd to 40th */
#chess :nth-child(n+33):nth-child(odd):nth-child(-n+40),

/* Even squares from 41st to 48th */
#chess :nth-child(n+41):nth-child(even):nth-child(-n+48),

/* Odd squares from 49th to 56th */
#chess :nth-child(n+49):nth-child(odd):nth-child(-n+56),

/* Even squares from 57th to 64th */
#chess :nth-child(n+57):nth-child(even):nth-child(-n+64) {
    background: #000;
}

 #chess { width: 320px; height: 320px; border: 1px solid #000; } #chess div { float: left; width: 40px; height: 40px; background: #fff; } #chess :nth-child(n+1):nth-child(odd):nth-child(-n+8), #chess :nth-child(n+9):nth-child(even):nth-child(-n+16), #chess :nth-child(n+17):nth-child(odd):nth-child(-n+24), #chess :nth-child(n+25):nth-child(even):nth-child(-n+32), #chess :nth-child(n+33):nth-child(odd):nth-child(-n+40), #chess :nth-child(n+41):nth-child(even):nth-child(-n+48), #chess :nth-child(n+49):nth-child(odd):nth-child(-n+56), #chess :nth-child(n+57):nth-child(even):nth-child(-n+64) { background: #000; }

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

Answer 8

尝试这个 ：

table.CHESS {
    border-collapse: collapse;
}

table.CHESS td {
    width: 50px;
    height: 50px;
    border: solid gray 1px;
}

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

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

Answer 9

对于那些需要每个方块都有一个 id 的 CSS3 国际象棋棋盘的人，以便您可以将其与 JavaScript 一起使用，我可以提出以下解决方案：

https://github.com/vpcom/CSS3-Chess-Board

此处提供演示： http : //vincentperrin.com/cr/css3/css3-chess-board/

它是用 Sass（SCSS 表示法）完成的，但您也可以使用已处理的 CSS 文件。 喜欢的人，这种事情也可以用玉来做。

享受！

Answer 10

如果使用 2 个重叠的容器是可以接受的，我认为有一种更直接和“静态”的方法而不使用花哨的 css 功能：

 .chess { position: absolute; display: grid; grid-template-columns: repeat(4, 25%); grid-template-rows: repeat(4, 25%); } #up > div { height: 50px; width: 50px; margin: 0px 50px 50px 0px; background-color: #000; } #down > div { height: 50px; width: 50px; margin: 50px 0px 0px 50px; background-color: #000; }

 <html> <div id = "cont"> <div id = "up" class="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 id = "down" class="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> </html>

Answer 11

灵感来自 BoltClocks 小提琴

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

 #chess { width: 8em; height: 8em; margin: 0.5em; border: 2px solid #808080; } #chess div { float: left; width: 1em; height: 1em; margin-left: 1em; background-color: #000; } #chess div:nth-child(8n+5){ margin-left: 0; } #chess div:nth-child(32) ~ div{ /* we dont need those :D*/ display: none; }

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

可能是我最喜欢的，使用网格：

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

 #chess { width: 8em; height: 8em; margin: 0.5em; border: 2px solid #808080; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); place-items: stretch; } #chess div:nth-child(2n) { background-color: #000; } /* swapping these 2 rules greatly helps understanding */ #chess div:nth-child(9n+1) { /* background-color:red; */ grid-row-start: 8; }

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

Answer 12

完毕。 示例： http : //jsfiddle.net/LFVQU/1/

<style type="text/css">
    #chess{
     width:800px;   
     height:800px;
     border:1px;
     border:1px solid #999;
    }
    #chess div{
     width:100px;
     height:100px;  
     float:left;  
    }
#chess div{background: #fff}
#chess div:nth-child(1), #chess div:nth-child(3), #chess div:nth-child(5), #chess div:nth-child(7),
#chess div:nth-child(10), #chess div:nth-child(12), #chess div:nth-child(14), #chess div:nth-child(16),
#chess div:nth-child(17), #chess div:nth-child(19), #chess div:nth-child(21), #chess div:nth-child(23),
#chess div:nth-child(26), #chess div:nth-child(28), #chess div:nth-child(30), #chess div:nth-child(32),
#chess div:nth-child(33), #chess div:nth-child(35), #chess div:nth-child(37), #chess div:nth-child(39),
#chess div:nth-child(42), #chess div:nth-child(44), #chess div:nth-child(46), #chess div:nth-child(48),
#chess div:nth-child(49), #chess div:nth-child(51), #chess div:nth-child(53), #chess div:nth-child(55),
#chess div:nth-child(58), #chess div:nth-child(60), #chess div:nth-child(62), #chess div:nth-child(64)
{
    background-color:#000;
} 
</style>

Answer 13

#chess {width:256px; height:256px; border:1px solid;}  
#chess div {width:32px; height:32px; display:inline-block; }
#chess div:nth-child(16n+1), #chess div:nth-child(16n+3),
#chess div:nth-child(16n+5), #chess div:nth-child(16n+7),
#chess div:nth-child(16n+10),#chess div:nth-child(16n+12),
#chess div:nth-child(16n+14),#chess div:nth-child(16n+16) {
  background-color:black;
}

我认为使用浮动/清除的答案更好，这正是我想出的。

Answer 14

 const HelloWorld = { template: '#tmpl', name: "HelloWorld", methods: { board (s) { return Array.from({length:s**2}).map((_,i)=>(parseInt(i/s,10)+1)%2===i%s%2) }, }, }; new Vue({ el: '#app', components: { HelloWorld }, template: '<HelloWorld />' })

 .hello { display: grid; grid-template-columns: repeat(8, 20px); } .square { width: 20px; height: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script type="text/x-template" id="tmpl"> <div class="hello"> <div class="square" v-for="(square, idx) in board(8)" :key="idx" :style="{ background: square ? '#FFF' : '#000' }" ></div> </div> </script> <div id="app"></div>

不是纯 CSS，而是更少的代码解决方案

Answer 15

让我建议你更干净的 css：

.divTableRow:nth-child(odd) .divTableCell:nth-child(even), .divTableRow:nth-child(even) .divTableCell:nth-child(odd) {
        background: #999;
    }

 .divTableRow:nth-child(odd) .divTableCell:nth-child(even), .divTableRow:nth-child(even) .divTableCell:nth-child(odd) { background: #999; } .divTable { display: table; width: 60%; float: left; } .divTableRow { display: table-row; } .divTableHeading { background-color: #EEE; display: table-header-group; } .divTableCell, .divTableHead { display: table-cell; padding: 3px 10px; height: 12.5%; width: 12.5%; text-align: center; } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold; } .divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold; } .divTableBody { background: white; display: table-row-group; }

 <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell"> <div id="black-rock1" class="draggable black">♜</div> </div> <div class="divTableCell"> <div id="black-knight1" class="draggable black">♞</div> </div> <div class="divTableCell"> <div id="black-bishop1" class="draggable black">♝</div> </div> <div class="divTableCell"> <div id="black-queen" class="draggable black">♛</div> </div> <div class="divTableCell"> <div id="black-king" class="draggable black">♚</div> </div> <div class="divTableCell"> <div id="black-bishop2" class="draggable black">♝</div> </div> <div class="divTableCell"> <div id="black-knight2" class="draggable black">♞</div> </div> <div class="divTableCell"> <div id="black-rack2" class="draggable black">♜</div> </div> </div> <div class="divTableRow"> <div class="divTableCell"> <div id="black-pawn1" class="draggable black">♟</div> </div> <div class="divTableCell"> <div id="black-pawn2" class="draggable black">♟</div> </div> <div class="divTableCell"> <div id="black-pawn3" class="draggable black">♟</div> </div> <div class="divTableCell"> <div id="black-pawn4" class="draggable black">♟</div> </div> <div class="divTableCell"> <div id="black-pawn5" class="draggable black">♟</div> </div> <div class="divTableCell"> <div id="black-pawn6" class="draggable black">♟</div> </div> <div class="divTableCell"> <div id="black-pawn7" class="draggable black">♟</div> </div> <div class="divTableCell"> <div id="black-pawn8" class="draggable black">♟</div> </div> </div> <div class="divTableRow"> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> </div> <div class="divTableRow"> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> </div> <div class="divTableRow"> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> </div> <div class="divTableRow"> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> <div class="divTableCell">&nbsp;</div> </div> <div class="divTableRow"> <div class="divTableCell"> <div id="white-pawn1" class="draggable white">♙</div> </div> <div class="divTableCell"> <div id="white-pawn2" class="draggable white">♙</div> </div> <div class="divTableCell"> <div id="white-pawn3" class="draggable white">♙</div> </div> <div class="divTableCell"> <div id="white-pawn4" class="draggable white">♙</div> </div> <div class="divTableCell"> <div id="white-pawn5" class="draggable white">♙</div> </div> <div class="divTableCell"> <div id="white-pawn6" class="draggable white">♙</div> </div> <div class="divTableCell"> <div id="white-pawn7" class="draggable white">♙</div> </div> <div class="divTableCell"> <div id="white-pawn8" class="draggable white">♙</div> </div> </div> <div class="divTableRow"> <div class="divTableCell"> <div id="white-rock1" class="draggable white">♖</div> </div> <div class="divTableCell"> <div id="white-knight1" class="draggable white">♘</div> </div> <div class="divTableCell"> <div id="white-bishop1" class="draggable white">♗</div> </div> <div class="divTableCell"> <div id="white-queen" class="draggable white">♕</div> </div> <div class="divTableCell"> <div id="white-king" class="draggable white">♔</div> </div> <div class="divTableCell"> <div id="white-bishop2" class="draggable white">♗</div> </div> <div class="divTableCell"> <div id="white-knight2" class="draggable white">♘</div> </div> <div class="divTableCell"> <div id="white-rack2" class="draggable white">♖</div> </div> </div> </div> </div>