纯粹的css Chessboard与div＆amp;没有类或ID，是否可能？

时间：2012-02-02 15:00:16

标签： html css

我有以下布局

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

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

那么请，任何想法？

15 个答案:

答案 0 :(得分：18)

您不必对每个: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 :(得分：16)

这是一个有趣的问题。我认为棋盘更好地表达为一个表而不是一系列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/

答案 2 :(得分：15)

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

使用给定的标记，如果您使用nth-of-type或nth-child并不重要，但是如果使用额外的标记，那么nth-child是更明显的选择。< / p> 

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>

答案 3 :(得分：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;
      }
    }
  }
}

答案 4 :(得分：3)

当然可以做到...... 

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

答案 5 :(得分：3)

您不能使用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;
}

答案 6 :(得分：2)

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

我只想添加一个在处理高级: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>

答案 7 :(得分：0)

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

答案 8 :(得分：0)

#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的答案更好，就像我想出的那样。

答案 9 :(得分：0)

对于那些需要CSS3国际象棋棋盘的人，每个方格都有一个id，以便你可以使用它，我可以提出这个解决方案：

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

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

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

享受！

答案 10 :(得分：0)

试试这个：

Application.WorksheetFunction.Index(...

答案 11 :(得分：0)

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

答案 12 :(得分：0)

如果使用 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 :(得分：0)

灵感来自 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>

答案 14 :(得分：-1)

让我建议你更干净的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>

相关问题
最新问题