Gunakan pemilih kelas pseudo :only-child untuk memilih gaya dengan elemen induk hanya mempunyai satu elemen anak.

Gunakan:pemilih kelas pseudo anak sahaja untuk memilih gaya elemen induk dengan hanya satu elemen anak

CSS adalah penting dalam pembangunan bahagian hadapan Sebagai sebahagian daripadanya, ia menyediakan gaya yang kaya untuk halaman web, menjadikan halaman kami lebih cantik dan lebih mudah dibaca. Antaranya, pemilih kelas pseudo ialah teknologi yang sangat berguna dalam CSS, yang boleh memilih elemen dan keadaan yang berbeza untuk penggayaan.

Antara pemilih kelas pseudo, :only-child ialah pemilih yang sangat berguna, yang boleh memilih gaya satu elemen anak sahaja dalam elemen induk. Dalam pembangunan sebenar, kita selalunya perlu menetapkan gaya mengikut situasi yang berbeza Dalam kes ini, kita boleh menggunakan :only-child untuk memilih elemen induk dengan hanya satu elemen anak.

Di bawah saya akan memberikan contoh kod khusus untuk menunjukkan cara menggunakan pemilih :anak-sahaja.

Andaikan kita mempunyai struktur HTML seperti berikut:

<div class="parent">
  <p>这是唯一的子元素</p>
</div>

<div class="parent">
  <p>这是第一个子元素</p>
  <p>这是第二个子元素</p>
</div>

<div class="parent">
  <p>这是第一个子元素</p>
  <p>这是第二个子元素</p>
  <p>这是第三个子元素</p>
</div>

Sekarang kita mahu menggayakan hanya elemen induk dalam div pertama yang hanya mempunyai satu elemen anak. Kita boleh menggunakan pemilih :only-child untuk mencapai keperluan ini. Kod khusus adalah seperti berikut:

.parent:only-child {
  background-color: lightgreen;
  padding: 10px;
}

Dalam kod di atas, kami mula-mula menggunakan pemilih .parent untuk memilih semua elemen dengan induk kelas, dan kemudian gunakan :only-child untuk memilih elemen induk dengan hanya satu unsur kanak-kanak. Kemudian tetapkan warna latar belakang elemen ini kepada hijau muda dan tambahkan 10 piksel pelapik.

Dengan cara ini, hanya elemen induk bagi div pertama dengan hanya satu elemen anak akan menggunakan gaya di atas dan div lain tidak akan terjejas.

Melalui contoh kod di atas, kita dapat melihat bahawa aplikasi praktikal pemilih anak tunggal adalah sangat mudah. Ia boleh membantu kami memilih elemen induk dengan hanya satu elemen anak dengan tepat, tanpa perlu menilai setiap elemen secara manual.

Untuk meringkaskan, pemilih :only-child ialah pemilih yang sangat berguna dalam CSS, yang boleh membantu kami memilih elemen induk dengan hanya satu elemen anak. Dengan menggunakan pemilih ini secara rasional, kami boleh menetapkan gaya halaman dengan lebih cekap dan meningkatkan kecekapan pembangunan.

Saya harap kandungan di atas akan membantu anda! Terima kasih kerana membaca!

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :only-child untuk memilih gaya dengan elemen induk hanya mempunyai satu elemen anak.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!