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

【问题标题】：Pure css Chessboard with div & no classes or ids, is it possible?带有 div 且没有类或 id 的纯 css 棋盘，这可能吗？
【发布时间】：2021-07-29 06:58:26
【问题描述】：

我有以下布局

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

我非常好奇这是否可以做到。它是作为任务分配给某人的。

那么，有什么想法吗？

【问题讨论】：

您要支持哪种浏览器和版本？

标签： html css

【解决方案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/

【讨论】：

通常我会批评某人更改 HTML，但这是对表格的恰当使用，我只需要投票即可:)

【解决方案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 preview

【讨论】：

+1 为速记！我希望对此进行一些解释，因为我从未见过这种语法。虽然我相信您的电路板旋转了 90 度（或镜像）并且顶部/左下/右方应该是黑色的
嗯。我已经好几年没下过国际象棋了 (Wikipedia does lay out its chessboards with the white squares on the top left and bottom right corners)，我更喜欢 @Christoph 的解决方案，因为它没有使用丑陋的负数或组合子。
@Dutchie432：负数n 会导致它倒数，所以对于:nth-child(-an+b)，你只获取a 倍数的第一个b 元素。与:nth-last-child(-an+b) 类似，您仅在a 的倍数处抓取最后一个b 元素。

【解决方案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&lt;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;
}

&lt;div id="chess"&gt;&lt;/div&gt;

【讨论】：

+1，我之前也是这样做的，基于old answer of mine，使用nth-child而不是nth-of-type。
+1 超级优雅。我花了一点时间来理解这背后的逻辑：Select the 8 divs (hence 8 selectors) to be colored in the first two rows (2 rows = 16 divs) and repeat ruleset every 16 divs 不过，我没有看到使用 nth-of-type 的充分理由，我颠倒了顺序，因为它对我来说更有意义。干得好。
@philtune 感谢您的意见，非常感谢！我相应地调整了我的答案，希望它现在更有用。

【解决方案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;
      }
    }
  }
}

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：

@Christoph：您可以通过算术运算获得创意，但不能使用odd 或even。

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案9】：

完成。示例：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>

【讨论】：

【解决方案10】：

#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;
}

我认为使用 float/clear 的答案更好，这正是我想出的。

【讨论】：

【解决方案11】：

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

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

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

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

享受吧！

【讨论】：

【解决方案12】：

如果使用 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>

【讨论】：

【解决方案13】：

灵感来自 BoltClocks 小提琴

for(i=0;i&lt;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;
}

&lt;div id="chess"&gt;&lt;/div&gt;

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

for(i=0;i&lt;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;
}

&lt;div id="chess"&gt;&lt;/div&gt;

【讨论】：

【解决方案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而是少代码解决方案

【讨论】：

【解决方案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>

【讨论】：