Bolehkah anda membuat papan catur CSS tulen dengan div, tetapi tanpa menggunakan kelas atau ID dalam struktur HTML?

Papan Catur CSS Tulen dengan Div dan Tiada Kelas atau ID: Penyelesaian Berpotensi

Pengenalan:

Bolehkah papan catur menjadi dibuat semata-mata menggunakan CSS, tanpa kelas atau ID, dan mematuhi struktur HTML yang disediakan?

HTML:

<code class="html"><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></code>

Cabaran:

Mencipta papan catur menggunakan CSS memerlukan warna berselang-seli untuk segi empat sama. Secara tradisinya, ini telah dicapai dengan kelas atau ID, tetapi dalam kes ini, pilihan sedemikian tidak tersedia.

Penyelesaian:

Penyelesaian yang inovatif adalah dengan menggunakan ke-n- child() pemilih untuk menyasarkan elemen div tertentu dalam struktur papan catur. Dengan menukar warna latar belakang untuk setiap elemen lain, kesan papan catur boleh dicapai.

Pelaksanaan:

<code class="css">div#chess div:nth-child(odd) {
  background-color: #000;
}
div#chess div:nth-child(even) {
  background-color: #fff;
}</code>

Hasil:

CSS ini akan mencipta corak papan catur dalam struktur HTML yang disediakan.

Kesimpulan:

Membuat papan catur semata-mata dengan CSS dan tanpa kelas atau ID sememangnya mungkin. Dengan memanfaatkan pemilih nth-child() dan warna latar belakang berselang-seli, papan catur yang menarik secara visual boleh dipaparkan.

Atas ialah kandungan terperinci Bolehkah anda membuat papan catur CSS tulen dengan div, tetapi tanpa menggunakan kelas atau ID dalam struktur HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!