Laksanakan pelbagai senario aplikasi CSS :pemilih kelas pseudo kosong-tutorial css-php.cn

Laksanakan pelbagai senario aplikasi CSS :pemilih kelas pseudo kosong

王林

Lepaskan： 2023-11-20 09:13:57

asal

1243 orang telah melayarinya

实现CSS :empty伪类选择器的多种应用场景

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.

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!