Bagaimanakah anda boleh membuat papan catur tanpa menggunakan kelas atau ID dalam CSS?-tutorial css-php.cn

Bagaimanakah anda boleh membuat papan catur tanpa menggunakan kelas atau ID dalam CSS?

Barbara Streisand

Lepaskan： 2024-10-31 11:54:30

asal

201 orang telah melayarinya

How can you create a chessboard without using classes or IDs in CSS?

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

elemen, memberikan cabaran unik untuk menggayakan corak papan catur. Pendekatan tradisional yang menggunakan pemilih nth-child() telah terbukti tidak berjaya.

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!