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

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

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

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

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!

css css3 for while using class this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn