Cara menggunakan pemilih CSS untuk pemilihan tidak inklusif

CSS ialah bahasa helaian gaya yang sangat berkuasa yang boleh digunakan untuk mengawal penampilan dan reka letak dokumen HTML. Dalam CSS, pemilih ialah corak untuk memilih elemen HTML. Gunakan pemilih untuk menukar gaya elemen dalam dokumen anda dengan mudah untuk mencapai kesan yang diingini. Dalam CSS, kadangkala anda perlu memilih beberapa elemen tetapi mengecualikan elemen lain Artikel ini akan memperkenalkan cara menggunakan pemilih CSS untuk melaksanakan pemilihan eksklusif.

Mengapa anda perlu mengecualikan pilihan?

Dalam projek sebenar, kadangkala ia perlu untuk menggayakan elemen keseluruhan aplikasi halaman web, tetapi beberapa elemen khusus perlu dikecualikan. Dalam kes ini, pilihan Kecualikan berguna untuk mengecualikan elemen yang tidak diperlukan, sekali gus menjadikan penggayaan lebih realistik.

Kaedah untuk pemilihan CSS tidak disertakan

Terdapat banyak jenis pemilih CSS, beberapa daripadanya boleh digunakan untuk elemen yang tidak disertakan oleh pemilih. Artikel ini akan memperkenalkan situasi biasa berikut.

1. Nafikan pemilih kelas pseudo

Nafikan pemilih kelas pseudo boleh memilih semua elemen kecuali satu elemen. Biasanya, kami menggunakan borang pemilih :not().

Sintaks khusus:

:not(selector) {}

pemilih merujuk kepada elemen yang akan dikecualikan.

Sebagai contoh, kami ingin menetapkan gaya semua elemen p, tetapi ingin mengecualikan elemen p tertentu dengan kelas hide, kodnya adalah seperti berikut:

p:not(.hide) {
  color: red;
}

Dalam contoh ini, kami menggunakan Pemilih :not() mengecualikan semua elemen p dengan nama kelas menyembunyikan. Dengan cara ini, warna teks semua elemen p akan menjadi merah, tetapi warna elemen p kelas hide tidak akan berubah.

2. Kanak-kanak digabungkan dengan pemilih kelas pseudo

Anda boleh menggunakan elemen keturunan digabungkan dengan pemilih kelas pseudo untuk memilih semua elemen di bawah elemen, tetapi mengecualikan elemen tertentu .

Sintaks khusus:

selector :not(selector) {}

Sebagai contoh, kami ingin menetapkan gaya elemen p dalam semua div, tetapi ingin mengecualikan elemen p tertentu dengan hide kelas, kodnya adalah seperti berikut :

div p:not(.hide) {
  color: red;
}

Dalam contoh ini, kami menggunakan pemilih :not() dan pemilih elemen turunan untuk mengecualikan semua elemen p dengan nama kelas yang disembunyikan. Dengan cara ini, warna teks semua elemen p dalam elemen div akan menjadi merah, tetapi warna elemen p kelas hide tidak akan berubah.

3. Pemilih universal

Pemilih universal (*) boleh memilih semua elemen, tetapi kita boleh menggabungkannya dengan pemilih lain untuk mengecualikan beberapa elemen dengan pemilih universal. Contohnya, kami ingin menggayakan elemen dengan kelas kotak tertentu, tetapi mengecualikan salah satu elemen dengan kelas foo Kodnya adalah seperti berikut:

.box:not(.foo) {
  background-color: blue;
}

Dalam contoh ini, kami menggunakan :not( ) pemilih, pemilih universal dan pemilih kelas, kecualikan semua elemen dengan kelas foo. Dengan cara ini, kami hanya menggayakan semua elemen dengan kotak kelas kecuali kelas foo.

Ringkasan

Dalam pembangunan sebenar, kita selalunya perlu mengecualikan elemen tertentu untuk memenuhi keperluan gaya tertentu. Dalam artikel ini, kami memperkenalkan tiga cara untuk memilih elemen yang tidak mengandungi:

• Gunakan pemilih kelas pseudo penafian: not()
• Gunakan elemen keturunan digabungkan dengan pseudo- pemilih kelas :not()
• Gunakan pemilih universal (*)

Kaedah di atas boleh digunakan untuk mengawal gaya elemen HTML untuk mencapai kesan yang berbeza penggunaan yang diperlukan.

Atas ialah kandungan terperinci Cara menggunakan pemilih CSS untuk pemilihan tidak inklusif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!