Bolehkah Anda Membuat Papan Catur dengan CSS Tulen dan Tiada Kelas atau ID?

Penciptaan Papan Catur CSS Tulen: Div, Tiada Kelas atau ID

Dalam bidang kesenian CSS tulen, cabaran biasa timbul: bagaimana untuk membina reka letak yang rumit tanpa menggunakan kelas atau ID. Satu teka-teki yang ingin tahu dalam alam ini ialah mencipta papan catur menggunakan hanya div, tanpa kelas atau ID.

Tugas khusus ini telah membingungkan bakal ahli sihir CSS selama beberapa hari, menarik mereka untuk meneroka alam nth-child() dan variasinya. Walau bagaimanapun, tiada penyelesaian nampaknya menjadi kenyataan.

Jadi, adakah mungkin untuk mencapai reka bentuk yang sukar difahami ini?

Menariknya, manakala papan catur boleh dipaparkan menggunakan div tanpa kelas atau ID, ia mungkin lebih sesuai untuk ekspresi sebagai jadual. Ini memberikan lebih banyak kebolehaksesan untuk pembaca skrin, membolehkan mereka menyampaikan dengan jelas kedudukan angka pada papan.

Pertimbangkan coretan CSS berikut:

<code class="css">table tr:nth-child(odd) td:nth-child(even) {
  background: #000;
}
table tr:nth-child(even) td:nth-child(odd) {
  background: #000;
}</code>

CSS ini dengan berkesan mencipta corak papan catur dalam struktur meja. Dengan menukar warna latar belakang baris dan lajur ganjil dan genap, corak berkotak yang biasa muncul.

Berikut ialah demonstrasi pada JSFiddle:

<code class="html"><table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

Atas ialah kandungan terperinci Bolehkah Anda Membuat Papan Catur dengan CSS Tulen dan Tiada Kelas atau ID?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!