Adakah CSS :not() Secara Selektif Mengecualikan Keturunan Jauh?-tutorial css-php.cn

Adakah CSS :not() Secara Selektif Mengecualikan Keturunan Jauh?

Susan Sarandon

Lepaskan： 2024-11-30 17:14:11

asal

514 orang telah melayarinya

Does CSS :not() Selectively Exclude Distant Descendants?

Keturunan Jarak dan Pemilih CSS :not()

Kelas pseudo CSS3 :not() direka untuk menafikan pemilih tertentu perlawanan. Ia telah dilaksanakan secara meluas merentasi pelayar. Walau bagaimanapun, salah tanggapan umum yang mengelilingi pemilih ini ialah kebolehgunaannya kepada keturunan jauh.

Walaupun :not() berjaya menafikan padanan untuk elemen anak langsung, ia tidak berkelakuan seperti yang diharapkan untuk keturunan yang lebih jauh. Seperti yang digambarkan dalam contoh yang disediakan:

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

Salin selepas log masuk

Dalam coretan ini,

elemen masih mewarisi warna merah daripada induknya

, walaupun ia bukan keturunan langsung
. Ini berlaku kerana :not() hanya menafikan secara langsung padanan untuk elemen itu, bukan keturunannya.

Dokumentasi untuk :not() dalam kedua-dua CSS3 dan CSS Selectors Tahap 4 tidak menangani gelagat ini secara eksplisit. Walau bagaimanapun, telah disahkan bahawa tingkah laku ini adalah disengajakan dan pemilih tidak dimaksudkan untuk menyokong padanan cucu.

Penyelesaian

Untuk mencapai hasil yang diinginkan tidak termasuk keturunan jauh daripada padanan :not(), kaedah berbeza mesti digunakan. Satu pendekatan biasa ialah untuk menentukan warna untuk elemen khusus yang ingin anda kecualikan, menimpa sebarang nilai yang diwarisi:
div {
  color: red;
}

div p {
  color: black;
}
Salin selepas log masuk
Pemilih CSS Tahap 4 Peningkatan

Pemilih CSS Tahap 4 mencadangkan peningkatan kepada pemilih :not(), membenarkan penggunaan pemilih yang lebih kompleks di dalamnya. Perubahan ini akan membolehkan sintaks berikut menafikan keturunan dengan betul:
p:not(div p) {
  color: red;
}
Salin selepas log masuk
Walaupun peningkatan ini belum dilaksanakan secara meluas dalam penyemak imbas, ia menyediakan penyelesaian yang menjanjikan untuk memadankan dan menafikan keturunan jauh menggunakan :not().
Atas ialah kandungan terperinci Adakah CSS :not() Secara Selektif Mengecualikan Keturunan Jauh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!