Papan Catur CSS Tulen: Meneroka Div dan Pengelakan Kelas dan Id
Percubaan untuk mencipta papan catur menggunakan CSS semata-mata dan mengelakkan penggunaan kelas atau id mungkin kelihatan seperti tugas yang menakutkan. Walau bagaimanapun, ia adalah tugas yang telah menimbulkan rasa ingin tahu ramai, termasuk pengaturcara yang diberikan dengan cabaran.
Reka letak HTML yang disediakan terdiri daripada pelbagai
Memikirkan Semula Pendekatan
Daripada menyasarkan secara langsung elemen individu tertentu, kita boleh memanfaatkan pendekatan berbeza yang melibatkan mengubah rupa unsur berselang-seli dalam kumpulan tertentu. Di sinilah kuasa kelas pseudo ganjil dan genap benar-benar bersinar.
Sebagai contoh, mari kita pertimbangkan jadual:
<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>
Menggunakan CSS, kita boleh menyasarkan baris dan lajur berselang-seli dalam jadual ini:
<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>
Peraturan CSS ini menetapkan warna latar belakang sel tertentu berdasarkan kedudukannya dalam baris dan lajur. Dengan berbuat demikian, corak papan dam dicipta yang menyerupai papan catur secara berkesan.
Anggun dan Cekap
Pendekatan ini menawarkan cara yang bersih dan cekap untuk mencipta papan catur menggunakan tulen CSS, kekal setia kepada kekangan mengelakkan kelas dan id. Ia mempamerkan kepelbagaian pemilih CSS dan keupayaan mereka untuk menyasarkan elemen berdasarkan kedudukan mereka dalam struktur tertentu.
Jadi, walaupun ia mungkin kelihatan seperti pendekatan tidak konvensional pada mulanya, mengeksploitasi kuasa pseudo ganjil dan genap -kelas menyediakan kunci untuk membuka kunci penyelesaian.
Atas ialah kandungan terperinci Bagaimanakah anda boleh membuat papan catur tanpa menggunakan kelas atau ID dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!