Bàn cờ css thuần túy với div & không có lớp hoặc id, có thể không?

Question

Tôi có cách bố trí sau

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

Có thể làm cho một bàn cờ chỉ sử dụng css và html mà không thay đổi trên? Điều đó có nghĩa là không có lớp hoặc id. Tôi đã tìm kiếm ý tưởng như vậy trong 2 ngày nay. Tôi đã thử với nth-child() và một số biến thể nhưng không thành công.

Tôi vô cùng tò mò nếu điều này có thể được thực hiện. Nó được giao cho một người nào đó.

Vì vậy, vui lòng, bất kỳ ý tưởng nào?

Answer 1

Bạn không cần phải hardcode mỗi :nth-child(). Đây là một cách để rút ngắn nó. Mỗi bộ chọn tương ứng với một hàng trên bàn cờ:

#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

Answer 2

tất nhiên nó có thể được thực hiện ...

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 3

Bạn không thể sử dụng nth-child(odd) hoặc nth-child(even) để tô màu các ô vuông, bởi vì không phải tất cả các "kỳ quặc" hay "thậm chí là" hình vuông cùng màu. Đếm từ trên cùng bên trái là vị trí "1", các ô màu trắng của hàng đầu tiên sẽ là 1, 3, 5, 7. Tiếp tục vào hàng thứ hai, các ô màu trắng sẽ là 10, 12, 14, 16. Hàng thứ ba sẽ được trở lại số lẻ, 17, 19, 21, và 23.

Bạn có thể do đó tay màu từng ô vuông như sau:

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

Done. Mẫu: 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 5

Các phương pháp sau đây làm cho việc sử dụng thực tế là mô hình màu lặp đi lặp lại mỗi 16 ô vuông (tính từ phía trên bên trái xuống dưới bên phải). Vì vậy, quy tắc đầu tiên là #chess div:nth-child(16n+1) màu các ô vuông 1,17,33 và 49 (nói cách khác là "cột đầu tiên"). Điều này được lặp lại với các quy tắc bổ sung cho tất cả các ô vuông màu từ 3 đến 16, mỗi cột đại diện cho một cột riêng biệt.

Với đánh dấu đã cho, không quan trọng nếu bạn sử dụng nth-of-type hoặc nth-child, tuy nhiên với đánh dấu bổ sung có thể, do đó, nth-child là loại lựa chọn rõ ràng hơn.

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 6

Đây là một vấn đề thú vị. Tôi nghĩ rằng một bàn cờ được thể hiện tốt hơn như một bảng hơn là một loạt các div, như một trình đọc màn hình sẽ ra lệnh cho các hàng và cột nơi các số liệu được đặt. Với một bảng:

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 7

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

Tôi nghĩ rằng câu trả lời sử dụng phao/rõ ràng là tốt hơn, chỉ là những gì tôi đã đưa ra.

Answer 8

Đối với những người cần một bảng CSS3 cờ với mỗi vuông có một id để bạn có thể sử dụng nó với Javascript, tôi có thể đề xuất các giải pháp này:

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

Một bản demo có sẵn ở đây: http://vincentperrin.com/cr/css3/css3-chess-board/

Nó được thực hiện với Sass (ký pháp SCSS) nhưng bạn có thể sử dụng tệp CSS đã xử lý cũng có sẵn. Đối với những người thích, loại điều này cũng có thể được thực hiện với Jade.

Tận hưởng!

Answer 9

Hãy thử điều này:

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 10

Trong CSS tinh khiết, câu trả lời được chấp nhận có vẻ đúng - tuy nhiên, nếu bạn muốn rút ngắn này với SCSS, bạn có thể làm một số toán học:

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