Adakah CSS `:not()` Menyasarkan Kanak-Kanak Terdekat atau Keturunan Jauh sahaja?-tutorial css-php.cn

Adakah CSS `:not()` Menyasarkan Kanak-Kanak Terdekat atau Keturunan Jauh sahaja?

Mary-Kate Olsen

Lepaskan： 2024-12-01 19:44:15

asal

472 orang telah melayarinya

Does CSS `:not()` Selectively Target Only Immediate Children or Distant Descendants?

Adakah Pemilih CSS :not() Melanjutkan kepada Keturunan Jauh?

Kelas pseudo CSS3 :not() membenarkan penafian dalam pemilih, tidak termasuk elemen yang sepadan dengan corak yang ditentukan. Walau bagaimanapun, terdapat had pada fungsinya.

Pelaksanaan Semasa

Seperti yang diterangkan dalam dokumentasi CSS3 dan CSS Selectors Tahap 4, :not() pada masa ini hanya sepadan dengan keturunan langsung . Dalam contoh yang disediakan:

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

Salin selepas log masuk

Pemilih ini menyasarkan anak langsung

yang bukan

. Unsur yang merupakan keturunan yang lebih jauh, walaupun terkandung dalam

bersarang dalam

, tidak akan terjejas.

Warisan dan Penggayaan

Pewarisan sifat penggayaan boleh merumitkan lagi tingkah laku :not(). Dalam contoh daripada soalan,

elemen dalam

mewarisi warna teks merah daripada induknya, walaupun
itu sendiri sepadan dengan pemilih :not(). Ini kerana penolakan digunakan pada elemen induk,
, yang memenuhi kriteria yang ditentukan.

Peningkatan Masa Depan

Pemilih CSS Tahap 4 mencadangkan pelanjutan : not() untuk memasukkan pemilih dan penggabung kompleks penuh. Ini akan membolehkan penapisan yang lebih berbutir, membolehkan pemilih seperti:
p:not(div p) {
  color: red;
}
Salin selepas log masuk
Pengesyoran

Disebabkan pengehadan semasa :not() dan kemungkinan kekeliruan dengan warisan , secara amnya dinasihatkan untuk mengelak daripada menggunakannya untuk menapis keturunan jauh. Pertimbangkan pendekatan alternatif seperti menggunakan pemilih langsung atau menggunakan penggayaan khusus pada elemen yang anda ingin kecualikan. Setelah sokongan untuk pemilih kompleks dalam :not() dilaksanakan, fungsi ini mungkin menjadi lebih berguna.
Atas ialah kandungan terperinci Adakah CSS `:not()` Menyasarkan Kanak-Kanak Terdekat atau Keturunan Jauh sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Mengapa Animasi CSS3 Saya Tidak Berfungsi dalam Safari? Artikel seterusnya：Bagaimanakah Saya Boleh Menambah Jarak Antara Lajur Bootstrap Secara Automatik?

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2061

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2222

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1872

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...