Bagaimanakah anda boleh membuat papan catur tanpa menggunakan kelas atau ID dalam 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>

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!

css html for while using this position background table

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn