Laksanakan pelbagai senario aplikasi CSS :pemilih kelas pseudo kosong

Untuk melaksanakan pelbagai senario aplikasi CSS :pemilih kelas pseudo kosong, contoh kod khusus diperlukan

CSS ialah bahasa yang digunakan untuk mengawal gaya halaman web yang boleh dipilih dan diubah suai melalui kawalan Gaya . Antaranya, pemilih kelas pseudo :empty digunakan untuk memilih elemen yang tidak mempunyai elemen anak. Artikel ini akan memperkenalkan pelbagai senario aplikasi pemilih kelas pseudo kosong dan memberikan contoh kod khusus.

1. Sembunyikan elemen kosong

Dengan menggunakan pemilih kelas pseudo :empty, kita boleh menyembunyikan elemen kosong dalam halaman. Contohnya, jika anda perlu menyembunyikan elemen perenggan kosong, anda boleh menggunakan kod berikut:

p:empty {
  display: none;
}

2. Tambah gaya pada elemen kosong

Sebaliknya, kami juga boleh menambah gaya khusus pada elemen kosong. Contohnya, jika anda perlu menambah sempadan dan warna latar belakang pada elemen div kosong, anda boleh menggunakan kod berikut:

div:empty {
  border: 1px solid #000;
  background-color: #f0f0f0;
}

3. Tetapkan gaya senarai kosong

Kadangkala, kita perlu mengendalikan senarai kosong secara khas . Dengan menggunakan pemilih kelas pseudo :empty, kita boleh menambah gaya untuk menyenaraikan item yang tidak mempunyai unsur anak. Contohnya, jika anda perlu menambah gaya tertentu pada

elemen yang tidak mempunyai unsur anak, anda boleh menggunakan kod berikut:

li:empty {
  color: red;
  font-weight: bold;
}

4. Sembunyikan sel jadual kosong

Apabila beberapa sel dalam jadual kosong , kita boleh Gunakan pemilih kelas pseudo :empty untuk menyembunyikan sel ini. Contohnya, jika anda perlu menyembunyikan sel kosong dalam jadual, anda boleh menggunakan kod berikut:

td:empty {
  display: none;
}

5. Laraskan gaya pautan kosong

Kadangkala, kami ingin melakukan layanan istimewa pada pautan tanpa kandungan teks. Dengan menggunakan pemilih kelas pseudo :empty, kami boleh menambah gaya tersuai untuk pautan kosong. Contohnya, jika anda perlu menggariskan pautan tanpa kandungan teks, anda boleh menggunakan kod berikut:

a:empty {
  text-decoration: underline;
}

Untuk meringkaskan, dengan menggunakan pemilih kelas pseudo CSS :kosong, kami boleh menyembunyikan elemen kosong, menambah gaya pada elemen kosong dan tetapkan elemen kosong. Terdapat banyak senario aplikasi seperti gaya senarai, menyembunyikan sel jadual kosong dan melaraskan gaya pautan kosong. Di atas adalah beberapa contoh kod khusus, saya harap ia akan membantu semua orang. Jika anda juga berminat dengan pemilih CSS, anda boleh terus mempelajari lebih lanjut dan meneroka lebih banyak aplikasi.

Atas ialah kandungan terperinci Laksanakan pelbagai senario aplikasi CSS :pemilih kelas pseudo kosong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!