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