Cara menggunakan pemilih :not pseudo-class untuk memilih gaya CSS untuk elemen yang tidak memenuhi kriteria

Cara menggunakan pemilih kelas :bukan pseudo untuk memilih gaya CSS untuk elemen yang tidak memenuhi syarat

Dalam CSS, kami sering menggunakan pemilih untuk memilih elemen yang memenuhi syarat tertentu dan kemudian menggunakan gaya padanya. Namun, kadangkala, kita perlu memilih elemen yang tidak memenuhi kriteria tertentu dan menggunakan gaya yang berbeza padanya. Pada masa ini, anda boleh menggunakan pemilih :not pseudo-class. Pemilih

:bukan kelas pseudo membolehkan kami mengecualikan beberapa elemen daripadanya dengan menentukan set pemilih dan hanya memilih elemen yang tidak sepadan dengan pemilih ini. Sintaks asasnya adalah seperti berikut:

:not(selector)

di mana pemilih ialah pemilih CSS yang sah yang menunjukkan elemen untuk dikecualikan. Kita boleh menggunakan pemilih teg, pemilih kelas, pemilih ID atau jenis pemilih lain.

Berikut ialah contoh menggunakan pemilih :not pseudo-class:

Kod HTML:

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Kod CSS:

.item {
  color: red;
}

li:not(.item) {
  color: blue;
}

Dalam contoh di atas, kami mempunyai senarai tidak tertib di mana tiga item senarai pertama mempunyai kelas Bernama "item ", dua item senarai terakhir tidak mempunyai nama kelas. Kami ingin menggunakan warna teks merah pada tiga item senarai pertama dan warna teks biru pada dua item senarai terakhir.

Kita boleh mencapai kesan ini dengan menggunakan pemilih :not pseudo-class dan mengecualikan elemen dengan nama kelas ".item".

Sepanjang dokumen, warna teks biru akan digunakan pada semua elemen li kecuali yang mempunyai nama kelas ".item". Dan elemen dengan nama kelas ".item" akan menggunakan warna teks merah.

Dengan pemilih :not pseudo-class, kami boleh memilih elemen yang tidak memenuhi syarat tertentu dengan lebih fleksibel dan menggunakan gaya padanya. Ini boleh menjadi sangat berguna dalam situasi tertentu, terutamanya apabila kita perlu melakukan pemprosesan khas untuk elemen di luar jenis atau keadaan tertentu.

Perlu diambil perhatian bahawa pemilih :not pseudo-class mungkin tidak serasi dengan beberapa versi pelayar lama. Oleh itu, pertimbangan ujian dan keserasian diperlukan apabila menggunakannya. Selain itu, kerumitan pemilih boleh menjejaskan prestasi, jadi berhati-hati apabila menggunakannya.

Untuk meringkaskan, dengan menggunakan pemilih :not pseudo-class, kita boleh memilih elemen yang tidak memenuhi syarat tertentu dan menggunakan gaya yang berbeza padanya. Sintaksnya ringkas dan jelas, mudah digunakan dan boleh memberikan fleksibiliti dan kebolehgunaan yang lebih baik dalam beberapa kes.

Atas ialah kandungan terperinci Cara menggunakan pemilih :not pseudo-class untuk memilih gaya CSS untuk elemen yang tidak memenuhi kriteria. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!